/* Start custom CSS for html, class: .elementor-element-2578f5d *//* =========================================
FUENTES
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@700;800;900&family=Montserrat:wght@400;500;600;700;800;900&display=swap');
/* =========================================
CONFIGURACIÓN GENERAL
========================================= */
.hb-prime-hero,
.hb-prime-hero *,
.hb-prime-hero *::before,
.hb-prime-hero *::after {
box-sizing: border-box;
}
.hb-prime-hero {
--hb-red: #ed0712;
--hb-red-light: #ff3741;
--hb-red-dark: #a90009;
--hb-green: #39ff14;
--hb-green-light: #79ff61;
--hb-green-dark: #1fd007;
--hb-white: #ffffff;
--hb-black: #050505;
position: relative;
width: 100%;
min-height: 100svh;
margin: 0;
overflow: hidden;
isolation: isolate;
background: var(--hb-black);
color: var(--hb-white);
font-family: "Montserrat", sans-serif;
}
.hb-prime-container {
position: relative;
z-index: 5;
width: min(1520px, calc(100% - 112px));
min-height: 100svh;
margin: 0 auto;
padding: 0 0 28px;
}
/* =========================================
FONDO
========================================= */
.hb-prime-background,
.hb-prime-decoration {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.hb-prime-background {
z-index: 0;
}
.hb-prime-decoration {
z-index: 2;
}
.hb-prime-background-image {
position: absolute;
inset: -30px;
background-image: var(--hb-background-image);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter:
brightness(0.74)
saturate(0.9)
contrast(1.08);
transform: scale(1.04);
animation:
hbPrimeBackgroundMove 18s ease-in-out infinite alternate;
}
.hb-prime-background-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.99) 0%,
rgba(0, 0, 0, 0.96) 28%,
rgba(0, 0, 0, 0.78) 52%,
rgba(0, 0, 0, 0.44) 100%
),
linear-gradient(
180deg,
rgba(0, 0, 0, 0.45) 0%,
transparent 45%,
rgba(0, 0, 0, 0.91) 100%
);
}
.hb-prime-background-glow {
position: absolute;
top: -12%;
right: -6%;
width: 68%;
height: 120%;
background:
radial-gradient(
ellipse,
rgba(237, 7, 18, 0.39),
rgba(237, 7, 18, 0.12) 43%,
transparent 72%
);
filter: blur(10px);
animation:
hbPrimeGlowPulse 7s ease-in-out infinite;
}
.hb-prime-background-grid {
position: absolute;
inset: 0;
opacity: 0.12;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
);
background-size: 48px 48px;
}
/* =========================================
DECORACIÓN
========================================= */
.hb-prime-deco-line {
position: absolute;
display: block;
height: 2px;
background:
linear-gradient(
90deg,
transparent,
var(--hb-red),
transparent
);
box-shadow:
0 0 14px rgba(237, 7, 18, 0.75);
opacity: 0.5;
}
.hb-prime-deco-line-1 {
top: 26%;
right: -5%;
width: 34%;
transform: rotate(-30deg);
}
.hb-prime-deco-line-2 {
bottom: 15%;
left: -5%;
width: 31%;
transform: rotate(24deg);
}
.hb-prime-deco-ray {
position: absolute;
display: block;
width: 31px;
height: 110px;
background: var(--hb-red);
opacity: 0.24;
clip-path: polygon(
55% 0,
100% 0,
65% 43%,
100% 43%,
20% 100%,
40% 56%,
0 56%
);
filter:
drop-shadow(
0 0 12px rgba(237, 7, 18, 0.9)
);
}
.hb-prime-deco-ray-1 {
top: 15%;
right: 2%;
transform: rotate(18deg);
animation:
hbPrimeRayFloat 5s ease-in-out infinite;
}
.hb-prime-deco-ray-2 {
right: 10%;
bottom: 8%;
width: 24px;
height: 85px;
transform: rotate(-12deg);
animation:
hbPrimeRayFloat 6s ease-in-out infinite reverse;
}
.hb-prime-deco-spark {
position: absolute;
color: var(--hb-red);
filter:
drop-shadow(
0 0 12px rgba(237, 7, 18, 0.9)
);
animation:
hbPrimeSparkPulse 2.8s ease-in-out infinite;
}
.hb-prime-deco-spark-1 {
top: 30%;
left: 57%;
font-size: 27px;
}
.hb-prime-deco-spark-2 {
top: 52%;
right: 2%;
font-size: 24px;
animation-delay: 0.7s;
}
.hb-prime-deco-spark-3 {
right: 34%;
bottom: 9%;
font-size: 19px;
animation-delay: 1.2s;
}
/* =========================================
HEADER
========================================= */
.hb-prime-header {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 84px;
border-bottom:
1px solid rgba(255, 255, 255, 0.12);
}
.hb-prime-brand {
display: inline-flex;
align-items: center;
gap: 11px;
color: var(--hb-white);
text-decoration: none;
}
.hb-prime-brand-shield {
position: relative;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 47px;
height: 54px;
background:
linear-gradient(
145deg,
var(--hb-red-light),
var(--hb-red-dark)
);
color: var(--hb-white);
clip-path: polygon(
50% 0,
92% 16%,
86% 70%,
50% 100%,
14% 70%,
8% 16%
);
font-family: "Barlow Condensed", sans-serif;
font-size: 16px;
font-weight: 900;
filter:
drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4))
drop-shadow(0 0 12px rgba(237, 7, 18, 0.4));
}
.hb-prime-brand-shield::after {
content: "";
position: absolute;
inset: 6px;
border:
1px solid rgba(255, 255, 255, 0.45);
clip-path: inherit;
}
.hb-prime-brand-copy {
display: flex;
flex-direction: column;
font-family: "Barlow Condensed", sans-serif;
line-height: 0.86;
}
.hb-prime-brand-copy strong {
color: var(--hb-white);
font-size: 22px;
font-weight: 900;
}
.hb-prime-brand-copy small {
color: var(--hb-red);
font-size: 15px;
font-weight: 900;
letter-spacing: 3.8px;
}
/* Botón superior */
.hb-prime-header-cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 47px;
padding: 0 18px;
overflow: hidden;
border:
2px solid rgba(255, 255, 255, 0.42);
border-radius: 14px;
background:
linear-gradient(
180deg,
var(--hb-green-light),
var(--hb-green) 48%,
var(--hb-green-dark)
);
color: #061105;
font-size: 12px;
font-weight: 900;
text-decoration: none;
box-shadow:
0 0 12px rgba(57, 255, 20, 0.76),
0 0 28px rgba(57, 255, 20, 0.45);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.hb-prime-header-cta:hover {
transform: translateY(-3px);
box-shadow:
0 0 20px rgba(57, 255, 20, 1),
0 0 45px rgba(57, 255, 20, 0.7);
}
.hb-prime-header-cta-light {
position: absolute;
top: -80%;
left: -45%;
width: 23%;
height: 280%;
background:
rgba(255, 255, 255, 0.7);
filter: blur(5px);
transform: rotate(22deg);
animation:
hbPrimeButtonSweep 3s linear infinite;
}
.hb-prime-header-whatsapp,
.hb-prime-header-cta-text {
position: relative;
z-index: 2;
}
.hb-prime-header-whatsapp {
display: grid;
place-items: center;
}
.hb-prime-header-whatsapp svg {
width: 22px;
height: 22px;
fill: #071306;
}
/* =========================================
DISTRIBUCIÓN PRINCIPAL
========================================= */
.hb-prime-main {
position: relative;
display: grid;
grid-template-columns:
minmax(0, 1.06fr)
minmax(440px, 0.94fr);
align-items: center;
gap: clamp(55px, 6vw, 105px);
min-height:
calc(100svh - 180px);
padding:
clamp(38px, 4.8vh, 60px)
0
30px;
}
.hb-prime-content {
position: relative;
z-index: 5;
width: 100%;
max-width: 790px;
}
/* =========================================
ETIQUETA SUPERIOR
========================================= */
.hb-prime-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding: 8px 15px;
border:
1px solid rgba(255, 255, 255, 0.17);
border-radius: 999px;
background:
rgba(5, 5, 5, 0.66);
color: var(--hb-white);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.8px;
backdrop-filter: blur(15px);
}
.hb-prime-eyebrow-icon {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 50%;
background: var(--hb-red);
color: var(--hb-white);
font-size: 11px;
box-shadow:
0 0 15px rgba(237, 7, 18, 0.6);
}
/* =========================================
TÍTULO MÁS GRUESO
========================================= */
.hb-prime-title {
display: flex;
flex-direction: column;
width: 100%;
max-width: 790px;
margin: 0;
font-family: "Archivo Black", sans-serif;
font-size: clamp(56px, 5vw, 92px);
font-weight: 900;
line-height: 0.9;
letter-spacing: -4.2px;
text-transform: uppercase;
text-shadow:
0 8px 30px rgba(0, 0, 0, 0.68);
animation:
hbPrimeContentIn 0.8s ease both;
}
.hb-prime-title-white,
.hb-prime-title-red {
display: block;
width: fit-content;
max-width: 100%;
}
.hb-prime-title-white {
color: var(--hb-white);
}
.hb-prime-title-red {
position: relative;
color: var(--hb-red);
}
.hb-prime-title-final {
padding-bottom: 14px;
}
.hb-prime-title-final::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 7px;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--hb-red),
var(--hb-red-light),
var(--hb-red)
);
box-shadow:
0 0 18px rgba(237, 7, 18, 0.75);
transform: skewX(-16deg);
animation:
hbPrimeUnderlinePulse 2s ease-in-out infinite;
}
/* =========================================
DESCRIPCIÓN
========================================= */
.hb-prime-description {
max-width: 650px;
margin: 25px 0 19px;
color:
rgba(255, 255, 255, 0.82);
font-size:
clamp(15px, 1.18vw, 18px);
font-weight: 500;
line-height: 1.6;
text-shadow:
0 3px 14px rgba(0, 0, 0, 0.7);
}
.hb-prime-description strong {
color: var(--hb-white);
font-weight: 900;
}
/* =========================================
MOMENTO ESPECIAL
========================================= */
.hb-prime-moment {
position: relative;
display: flex;
align-items: center;
gap: 15px;
max-width: 655px;
margin-bottom: 18px;
padding: 14px 17px;
overflow: hidden;
border:
1px solid rgba(237, 7, 18, 0.74);
border-radius: 17px;
background:
linear-gradient(
105deg,
rgba(237, 7, 18, 0.18),
rgba(8, 8, 8, 0.84)
);
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(15px);
}
.hb-prime-moment-shield {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 48px;
height: 55px;
background: var(--hb-red);
color: var(--hb-white);
font-size: 18px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
}
.hb-prime-moment-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
}
.hb-prime-moment-copy small {
color: #ff8389;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.7px;
}
.hb-prime-moment-copy strong {
color: var(--hb-white);
font-size: 13px;
line-height: 1.42;
}
.hb-prime-moment-shine {
position: absolute;
top: -100%;
left: -45%;
width: 22%;
height: 300%;
background:
rgba(255, 255, 255, 0.2);
transform: rotate(22deg);
animation:
hbPrimeMomentSweep 4.8s ease-in-out infinite;
}
/* =========================================
BENEFICIOS
========================================= */
.hb-prime-benefits {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 8px 13px;
max-width: 670px;
margin-bottom: 23px;
}
.hb-prime-benefit {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
min-height: 38px;
}
.hb-prime-benefit > span {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 23px;
height: 23px;
border-radius: 50%;
background: var(--hb-red);
color: var(--hb-white);
font-size: 11px;
font-weight: 900;
box-shadow:
0 0 12px rgba(237, 7, 18, 0.34);
}
.hb-prime-benefit p {
margin: 0;
color:
rgba(255, 255, 255, 0.87);
font-size: 10px;
font-weight: 700;
line-height: 1.3;
}
/* =========================================
PRECIO Y BOTÓN
========================================= */
.hb-prime-conversion {
display: flex;
align-items: stretch;
gap: 14px;
width: 100%;
max-width: 670px;
}
.hb-prime-price-card {
position: relative;
display: flex;
flex: 0 0 245px;
flex-direction: column;
justify-content: center;
min-height: 108px;
padding: 14px 18px;
overflow: hidden;
border:
1px solid rgba(255, 255, 255, 0.17);
border-radius: 19px;
background:
linear-gradient(
135deg,
var(--hb-red-light),
var(--hb-red-dark)
);
color: var(--hb-white);
box-shadow:
0 17px 40px rgba(0, 0, 0, 0.32),
0 0 25px rgba(237, 7, 18, 0.2);
}
.hb-prime-price-card > small {
position: relative;
z-index: 2;
color:
rgba(255, 255, 255, 0.76);
font-size: 8px;
font-weight: 900;
letter-spacing: 2px;
}
.hb-prime-price {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
font-family: "Barlow Condensed", sans-serif;
line-height: 1;
}
.hb-prime-price span {
margin-top: 8px;
margin-right: 3px;
font-size: 21px;
font-weight: 900;
}
.hb-prime-price strong {
font-size: 49px;
font-weight: 900;
letter-spacing: -1px;
}
.hb-prime-price-card > p {
position: relative;
z-index: 2;
margin: 2px 0 0;
color:
rgba(255, 255, 255, 0.85);
font-size: 9px;
font-weight: 800;
}
.hb-prime-price-star {
position: absolute;
right: -3px;
bottom: -33px;
color:
rgba(255, 255, 255, 0.13);
font-size: 100px;
transform: rotate(10deg);
}
.hb-prime-action {
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
}
.hb-prime-whatsapp-button {
position: relative;
display: flex;
flex: 1;
align-items: center;
gap: 12px;
min-width: 0;
min-height: 76px;
padding: 13px 16px;
overflow: hidden;
border:
2px solid rgba(255, 255, 255, 0.48);
border-radius: 19px;
background:
linear-gradient(
180deg,
var(--hb-green-light),
var(--hb-green) 46%,
var(--hb-green-dark)
);
color: #061105;
text-decoration: none;
box-shadow:
0 0 15px rgba(57, 255, 20, 0.84),
0 0 36px rgba(57, 255, 20, 0.54),
0 18px 40px rgba(57, 255, 20, 0.25);
transition:
transform 0.32s ease,
filter 0.32s ease,
box-shadow 0.32s ease;
}
.hb-prime-whatsapp-button:hover {
transform:
translateY(-5px)
scale(1.025);
filter: brightness(1.08);
box-shadow:
0 0 24px rgba(57, 255, 20, 1),
0 0 52px rgba(57, 255, 20, 0.78),
0 24px 50px rgba(0, 0, 0, 0.35);
}
.hb-prime-button-light {
position: absolute;
inset: 3px;
border:
1px solid rgba(255, 255, 255, 0.48);
border-radius: 15px;
opacity: 0.55;
}
.hb-prime-button-shine {
position: absolute;
top: -85%;
left: -45%;
width: 24%;
height: 290%;
background:
rgba(255, 255, 255, 0.34);
transform: rotate(22deg);
animation:
hbPrimeButtonShine 3.5s ease-in-out infinite;
}
.hb-prime-button-icon,
.hb-prime-button-copy,
.hb-prime-button-arrow {
position: relative;
z-index: 2;
}
.hb-prime-button-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background:
rgba(5, 30, 3, 0.16);
animation:
hbPrimeWhatsappPulse 1.6s ease-in-out infinite;
}
.hb-prime-button-icon svg {
width: 27px;
height: 27px;
fill: #071306;
}
.hb-prime-button-copy {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
}
.hb-prime-button-copy strong {
color: #061105;
font-size: 12px;
font-weight: 950;
}
.hb-prime-button-copy small {
margin-top: 2px;
color:
rgba(6, 17, 5, 0.72);
font-size: 9px;
font-weight: 750;
}
.hb-prime-button-arrow {
color: #061105;
font-size: 23px;
transition:
transform 0.3s ease;
}
.hb-prime-whatsapp-button:hover
.hb-prime-button-arrow {
transform: translateX(5px);
}
.hb-prime-saving {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 25px;
color:
rgba(255, 255, 255, 0.8);
font-size: 9px;
font-weight: 900;
}
.hb-prime-saving b {
color: var(--hb-red);
animation:
hbPrimeSparkPulse 1.8s ease-in-out infinite;
}
/* =========================================
COLUMNA VISUAL
========================================= */
.hb-prime-visual {
position: relative;
min-width: 0;
min-height: 600px;
animation:
hbPrimeVisualIn 1s 0.2s ease both;
}
.hb-prime-visual-energy {
position: absolute;
inset: 4% 0 7%;
border-radius:
50% 48% 43% 56% /
54% 42% 58% 46%;
background:
radial-gradient(
circle,
rgba(237, 7, 18, 0.75),
rgba(237, 7, 18, 0.2) 44%,
transparent 72%
);
animation:
hbPrimeEnergyPulse 6s ease-in-out infinite;
}
.hb-prime-main-image {
position: absolute;
inset: 5% 5% 14% 7%;
overflow: hidden;
border:
6px solid rgba(255, 255, 255, 0.96);
border-radius:
40px 40px 96px 40px;
background-image:
var(--hb-main-image);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow:
0 35px 70px rgba(0, 0, 0, 0.5),
0 0 0 2px rgba(237, 7, 18, 0.8),
0 0 35px rgba(237, 7, 18, 0.18);
transform: rotate(1.2deg);
transition:
transform 0.55s ease;
}
.hb-prime-main-image:hover {
transform:
rotate(0deg)
translateY(-4px);
}
.hb-prime-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0, 0, 0, 0.54),
transparent 48%
);
}
.hb-prime-people-badge {
position: absolute;
top: 2%;
right: -1%;
z-index: 8;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 15px;
border:
1px solid rgba(255, 255, 255, 0.2);
border-radius: 17px;
background:
rgba(8, 8, 8, 0.92);
box-shadow:
0 17px 38px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(15px);
animation:
hbPrimeBadgeFloat 4.5s ease-in-out infinite;
}
.hb-prime-people-icon {
font-size: 27px;
}
.hb-prime-people-badge > span:last-child {
display: flex;
flex-direction: column;
}
.hb-prime-people-badge small {
color: #ff8187;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.6px;
}
.hb-prime-people-badge strong {
color: var(--hb-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 20px;
font-weight: 900;
}
.hb-prime-seal {
position: absolute;
left: 0;
bottom: 13%;
z-index: 9;
display: flex;
width: 122px;
height: 122px;
flex-direction: column;
align-items: center;
justify-content: center;
border:
5px solid var(--hb-white);
border-radius: 50%;
background:
linear-gradient(
145deg,
var(--hb-red-light),
var(--hb-red-dark)
);
color: var(--hb-white);
box-shadow:
0 20px 42px rgba(0, 0, 0, 0.42),
0 0 0 3px var(--hb-black);
text-align: center;
transform: rotate(-9deg);
animation:
hbPrimeSealFloat 4.7s ease-in-out infinite;
}
.hb-prime-seal::before {
content: "";
position: absolute;
inset: 8px;
border:
2px dashed rgba(255, 255, 255, 0.55);
border-radius: 50%;
}
.hb-prime-seal > * {
position: relative;
z-index: 2;
}
.hb-prime-seal small {
font-size: 8px;
font-weight: 900;
letter-spacing: 2px;
}
.hb-prime-seal strong {
margin: 2px 0;
font-family: "Barlow Condensed", sans-serif;
font-size: 28px;
font-weight: 900;
line-height: 0.9;
}
.hb-prime-seal span {
font-size: 7px;
font-weight: 900;
}
.hb-prime-characters {
position: absolute;
right: -1%;
bottom: 2%;
z-index: 8;
width: min(370px, 77%);
padding: 18px;
border:
1px solid rgba(237, 7, 18, 0.92);
border-radius: 22px;
background:
rgba(6, 6, 6, 0.95);
box-shadow:
0 24px 50px rgba(0, 0, 0, 0.5),
0 0 0 5px rgba(237, 7, 18, 0.09);
backdrop-filter: blur(15px);
animation:
hbPrimeCharactersFloat 5s ease-in-out infinite;
}
.hb-prime-characters-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.hb-prime-characters-title > span {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--hb-red);
color: var(--hb-white);
font-size: 15px;
}
.hb-prime-characters-title > div {
display: flex;
flex-direction: column;
}
.hb-prime-characters-title small {
color: #ff7b82;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.7px;
}
.hb-prime-characters-title strong {
color: var(--hb-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 18px;
font-weight: 900;
}
.hb-prime-character-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hb-prime-character-tags span {
padding: 6px 9px;
border:
1px solid rgba(255, 255, 255, 0.13);
border-radius: 999px;
background:
rgba(255, 255, 255, 0.06);
color:
rgba(255, 255, 255, 0.86);
font-size: 8px;
font-weight: 700;
}
/* =========================================
FRANJA INFERIOR
========================================= */
.hb-prime-bottom {
position: relative;
z-index: 8;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 66px;
padding: 11px 18px;
border:
1px solid rgba(237, 7, 18, 0.45);
border-radius: 19px;
background:
linear-gradient(
90deg,
rgba(237, 7, 18, 0.14),
rgba(5, 5, 5, 0.87)
);
backdrop-filter: blur(14px);
}
.hb-prime-bottom-copy {
display: flex;
align-items: center;
gap: 12px;
}
.hb-prime-bottom-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--hb-red);
color: var(--hb-white);
font-size: 14px;
}
.hb-prime-bottom-copy p {
margin: 0;
color:
rgba(255, 255, 255, 0.77);
font-size: 11px;
font-weight: 600;
}
.hb-prime-bottom-copy strong {
color: var(--hb-white);
}
.hb-prime-bottom-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--hb-white);
font-size: 9px;
font-weight: 900;
text-decoration: none;
}
.hb-prime-bottom-link b {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--hb-red);
color: var(--hb-white);
font-size: 13px;
animation:
hbPrimeArrowMove 1.6s ease-in-out infinite;
}
/* =========================================
ANIMACIONES
========================================= */
@keyframes hbPrimeContentIn {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hbPrimeVisualIn {
from {
opacity: 0;
transform:
translateX(35px)
scale(0.97);
}
to {
opacity: 1;
transform:
translateX(0)
scale(1);
}
}
@keyframes hbPrimeBackgroundMove {
from {
transform: scale(1.04);
}
to {
transform: scale(1.11);
}
}
@keyframes hbPrimeGlowPulse {
0%,
100% {
opacity: 0.7;
transform: scale(0.96);
}
50% {
opacity: 1;
transform: scale(1.06);
}
}
@keyframes hbPrimeUnderlinePulse {
0%,
100% {
opacity: 0.75;
transform:
skewX(-16deg)
scaleX(0.96);
}
50% {
opacity: 1;
transform:
skewX(-16deg)
scaleX(1.03);
}
}
@keyframes hbPrimeRayFloat {
0%,
100% {
translate: 0 0;
}
50% {
translate: 0 -17px;
}
}
@keyframes hbPrimeSparkPulse {
0%,
100% {
opacity: 0.35;
transform:
scale(0.8)
rotate(0deg);
}
50% {
opacity: 1;
transform:
scale(1.3)
rotate(18deg);
}
}
@keyframes hbPrimeMomentSweep {
0%,
30% {
left: -45%;
}
65%,
100% {
left: 130%;
}
}
@keyframes hbPrimeButtonSweep {
from {
transform:
translateX(-130%)
rotate(22deg);
}
to {
transform:
translateX(700%)
rotate(22deg);
}
}
@keyframes hbPrimeButtonShine {
0%,
30% {
left: -45%;
}
65%,
100% {
left: 130%;
}
}
@keyframes hbPrimeWhatsappPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.13);
}
}
@keyframes hbPrimeEnergyPulse {
0%,
100% {
transform:
scale(0.97)
rotate(0deg);
}
50% {
transform:
scale(1.04)
rotate(2deg);
}
}
@keyframes hbPrimeBadgeFloat {
0%,
100% {
transform:
translateY(0)
rotate(2deg);
}
50% {
transform:
translateY(-10px)
rotate(-1deg);
}
}
@keyframes hbPrimeSealFloat {
0%,
100% {
transform:
translateY(0)
rotate(-9deg);
}
50% {
transform:
translateY(-11px)
rotate(-5deg);
}
}
@keyframes hbPrimeCharactersFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@keyframes hbPrimeArrowMove {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
}
/* =========================================
PANTALLAS GRANDES
========================================= */
@media (min-width: 1550px) {
.hb-prime-container {
width:
min(1560px, calc(100% - 140px));
}
.hb-prime-title {
font-size:
clamp(68px, 4.75vw, 94px);
}
}
/* =========================================
PORTÁTILES
========================================= */
@media (max-width: 1280px) {
.hb-prime-container {
width:
min(1200px, calc(100% - 64px));
}
.hb-prime-main {
grid-template-columns:
minmax(0, 1fr)
minmax(390px, 0.84fr);
gap: 42px;
}
.hb-prime-title {
font-size:
clamp(52px, 5.4vw, 78px);
letter-spacing: -3.5px;
}
.hb-prime-benefits {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.hb-prime-visual {
min-height: 560px;
}
}
/* =========================================
TABLETA
========================================= */
@media (max-width: 920px) {
.hb-prime-hero {
min-height: auto;
}
.hb-prime-container {
width:
min(760px, calc(100% - 34px));
min-height: auto;
}
.hb-prime-background-overlay {
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.96),
rgba(0, 0, 0, 0.82) 45%,
rgba(0, 0, 0, 0.95)
);
}
.hb-prime-main {
grid-template-columns: 1fr;
gap: 40px;
min-height: auto;
padding:
44px 0
34px;
}
.hb-prime-content {
max-width: none;
text-align: center;
}
.hb-prime-eyebrow {
margin-right: auto;
margin-left: auto;
}
.hb-prime-title {
align-items: center;
max-width: 720px;
margin-right: auto;
margin-left: auto;
font-size:
clamp(51px, 10.5vw, 82px);
line-height: 0.92;
letter-spacing: -3px;
}
.hb-prime-title-white,
.hb-prime-title-red {
width: auto;
}
.hb-prime-description,
.hb-prime-moment,
.hb-prime-benefits,
.hb-prime-conversion {
margin-right: auto;
margin-left: auto;
}
.hb-prime-moment,
.hb-prime-benefits,
.hb-prime-conversion {
text-align: left;
}
.hb-prime-conversion {
width: min(100%, 560px);
}
.hb-prime-price-card {
align-items: center;
text-align: center;
}
.hb-prime-visual {
width: min(100%, 620px);
min-height: 610px;
margin: 0 auto;
}
.hb-prime-main-image {
inset: 5% 3% 17%;
}
.hb-prime-people-badge {
right: 0;
}
.hb-prime-characters {
right: 0;
bottom: 1%;
}
}
/* =========================================
MÓVIL
========================================= */
@media (max-width: 580px) {
.hb-prime-container {
width:
min(510px, calc(100% - 24px));
}
.hb-prime-header {
min-height: 74px;
}
.hb-prime-brand-shield {
width: 40px;
height: 46px;
}
.hb-prime-brand-copy strong {
font-size: 18px;
}
.hb-prime-brand-copy small {
font-size: 13px;
letter-spacing: 3px;
}
.hb-prime-header-cta {
width: 46px;
min-height: 46px;
padding: 0;
}
.hb-prime-header-cta-text {
display: none;
}
.hb-prime-main {
gap: 30px;
padding-top: 35px;
}
.hb-prime-eyebrow {
padding: 7px 10px;
font-size: 7.5px;
letter-spacing: 1px;
}
.hb-prime-eyebrow-icon {
width: 23px;
height: 23px;
font-size: 9px;
}
.hb-prime-title {
font-size:
clamp(42px, 13.5vw, 64px);
line-height: 0.93;
letter-spacing: -2.6px;
}
.hb-prime-title-final {
padding-bottom: 10px;
}
.hb-prime-title-final::after {
height: 5px;
}
.hb-prime-description {
margin-top: 22px;
font-size: 13.5px;
}
.hb-prime-moment {
gap: 11px;
padding: 12px;
border-radius: 15px;
}
.hb-prime-moment-shield {
width: 42px;
height: 48px;
}
.hb-prime-moment-copy small {
font-size: 7px;
letter-spacing: 1.1px;
}
.hb-prime-moment-copy strong {
font-size: 11px;
}
.hb-prime-benefits {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 4px 8px;
}
.hb-prime-benefit p {
font-size: 9px;
}
.hb-prime-conversion {
flex-direction: column;
}
.hb-prime-price-card {
flex: auto;
min-height: 105px;
}
.hb-prime-whatsapp-button {
min-height: 72px;
padding: 11px 13px;
}
.hb-prime-button-icon {
width: 36px;
height: 36px;
}
.hb-prime-button-icon svg {
width: 23px;
height: 23px;
}
.hb-prime-button-copy strong {
font-size: 10px;
}
.hb-prime-button-copy small {
font-size: 8px;
}
.hb-prime-visual {
min-height: 500px;
}
.hb-prime-main-image {
inset: 5% 1% 21%;
border-width: 5px;
border-radius:
27px 27px 70px 27px;
}
.hb-prime-people-badge {
padding: 8px 10px;
}
.hb-prime-people-icon {
font-size: 21px;
}
.hb-prime-people-badge small {
font-size: 6px;
}
.hb-prime-people-badge strong {
font-size: 15px;
}
.hb-prime-seal {
bottom: 17%;
width: 88px;
height: 88px;
border-width: 4px;
}
.hb-prime-seal strong {
font-size: 19px;
}
.hb-prime-characters {
width: 89%;
padding: 14px;
}
.hb-prime-character-tags span {
padding: 5px 7px;
font-size: 7px;
}
.hb-prime-bottom {
flex-direction: column;
gap: 12px;
padding: 14px;
}
.hb-prime-bottom-copy p {
font-size: 9px;
line-height: 1.45;
}
}
/* =========================================
MÓVILES PEQUEÑOS
========================================= */
@media (max-width: 390px) {
.hb-prime-container {
width:
calc(100% - 18px);
}
.hb-prime-title {
font-size:
clamp(39px, 13vw, 52px);
letter-spacing: -2px;
}
.hb-prime-visual {
min-height: 465px;
}
}
/* =========================================
REDUCCIÓN DE MOVIMIENTO
========================================= */
@media (prefers-reduced-motion: reduce) {
.hb-prime-hero *,
.hb-prime-hero *::before,
.hb-prime-hero *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
CORRECCIÓN DEFINITIVA MÓVIL — SECCIÓN 1
Agregar al FINAL del CSS
========================================================= */
@media (max-width: 580px) {
/* Evita cualquier desplazamiento horizontal */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.hb-prime-hero {
width: 100%;
max-width: 100%;
min-height: auto;
overflow: hidden;
}
.hb-prime-container {
width: 100%;
max-width: 100%;
min-height: auto;
margin: 0;
padding: 0 18px 22px;
overflow: hidden;
}
/* =====================================
HEADER
===================================== */
.hb-prime-header {
width: 100%;
min-height: 76px;
}
.hb-prime-brand {
min-width: 0;
}
/* =====================================
DISTRIBUCIÓN
===================================== */
.hb-prime-main {
display: flex;
width: 100%;
min-width: 0;
flex-direction: column;
gap: 34px;
padding: 38px 0 28px;
}
.hb-prime-content {
width: 100%;
max-width: 100%;
min-width: 0;
padding: 0;
text-align: center;
}
/* =====================================
TÍTULO
===================================== */
.hb-prime-title {
display: flex;
width: 100%;
max-width: 100%;
min-width: 0;
flex-direction: column;
align-items: center;
margin: 0 auto;
font-size: clamp(42px, 12.2vw, 58px);
line-height: 0.92;
letter-spacing: -2px;
text-align: center;
overflow-wrap: normal;
word-break: normal;
}
.hb-prime-title-white,
.hb-prime-title-red {
display: block;
width: 100%;
max-width: 100%;
white-space: normal;
text-align: center;
}
/*
La primera frase se divide de forma controlada
para que nunca se salga del celular.
*/
.hb-prime-title-white {
max-width: 100%;
padding: 0 2px;
}
.hb-prime-title-red {
width: fit-content;
max-width: 100%;
}
.hb-prime-title-final {
padding-right: 5px;
padding-bottom: 11px;
padding-left: 5px;
}
.hb-prime-title-final::after {
right: 0;
left: 0;
width: 100%;
}
/* =====================================
TEXTOS
===================================== */
.hb-prime-description {
width: 100%;
max-width: 100%;
margin: 25px auto 20px;
padding: 0 4px;
font-size: 14px;
line-height: 1.58;
text-align: center;
}
/* =====================================
TARJETA MOMENTO ESPECIAL
===================================== */
.hb-prime-moment {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0 auto 20px;
padding: 13px;
gap: 12px;
text-align: left;
}
.hb-prime-moment-copy {
min-width: 0;
}
.hb-prime-moment-copy strong {
overflow-wrap: anywhere;
}
/* =====================================
BENEFICIOS
===================================== */
.hb-prime-benefits {
width: 100%;
max-width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 13px;
margin: 0 auto 25px;
text-align: left;
}
.hb-prime-benefit {
min-width: 0;
}
.hb-prime-benefit p {
min-width: 0;
font-size: 9.5px;
overflow-wrap: anywhere;
}
/* =====================================
PRECIO Y CTA
===================================== */
.hb-prime-conversion {
display: flex;
width: 100%;
max-width: 100%;
min-width: 0;
flex-direction: column;
gap: 17px;
margin: 0 auto;
}
.hb-prime-price-card {
width: 100%;
max-width: 100%;
min-width: 0;
flex: none;
align-items: center;
min-height: 145px;
padding: 18px 16px;
text-align: center;
}
.hb-prime-price {
justify-content: center;
}
.hb-prime-price strong {
font-size: clamp(54px, 16vw, 72px);
}
.hb-prime-price-card > p {
font-size: 10px;
}
.hb-prime-action {
width: 100%;
max-width: 100%;
min-width: 0;
}
.hb-prime-whatsapp-button {
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 82px;
padding: 13px 16px;
}
.hb-prime-button-copy {
min-width: 0;
}
.hb-prime-button-copy strong {
font-size: 11px;
white-space: normal;
}
.hb-prime-button-copy small {
font-size: 8px;
}
.hb-prime-button-arrow {
flex: 0 0 auto;
}
/* =====================================
COLUMNA VISUAL
===================================== */
.hb-prime-visual {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 560px;
margin: 5px auto 0;
}
.hb-prime-visual-energy {
inset: 4% 0 8%;
}
.hb-prime-main-image {
position: absolute;
inset: 6% 0 22%;
width: auto;
max-width: 100%;
margin: 0;
border-width: 5px;
border-radius: 28px 28px 68px 28px;
transform: none;
}
.hb-prime-main-image:hover {
transform: none;
}
/* Badge de 4 personas dentro del ancho */
.hb-prime-people-badge {
top: 2%;
right: 0;
max-width: 52%;
padding: 8px 10px;
gap: 7px;
}
.hb-prime-people-badge small {
font-size: 5.8px;
letter-spacing: 0.8px;
}
.hb-prime-people-badge strong {
font-size: 14px;
line-height: 1;
}
.hb-prime-people-icon {
font-size: 19px;
}
/* Sello dentro del celular */
.hb-prime-seal {
left: 0;
bottom: 15%;
width: 88px;
height: 88px;
}
/* Tarjeta de personajes sin desbordarse */
.hb-prime-characters {
right: 0;
bottom: 0;
width: calc(100% - 68px);
max-width: calc(100% - 68px);
min-width: 0;
padding: 14px;
border-radius: 18px;
}
.hb-prime-characters-title {
min-width: 0;
}
.hb-prime-characters-title > div {
min-width: 0;
}
.hb-prime-characters-title strong {
font-size: 16px;
white-space: normal;
}
.hb-prime-character-tags {
width: 100%;
max-width: 100%;
}
.hb-prime-character-tags span {
padding: 5px 7px;
font-size: 7px;
}
/* =====================================
FRANJA INFERIOR
===================================== */
.hb-prime-bottom {
width: 100%;
max-width: 100%;
min-width: 0;
flex-direction: column;
align-items: stretch;
gap: 13px;
margin-top: 18px;
padding: 14px;
}
.hb-prime-bottom-copy {
min-width: 0;
}
.hb-prime-bottom-copy p {
min-width: 0;
font-size: 9px;
overflow-wrap: anywhere;
}
.hb-prime-bottom-link {
justify-content: center;
}
}
/* =========================================================
IPHONE Y CELULARES ESTRECHOS
========================================================= */
@media (max-width: 430px) {
.hb-prime-container {
padding-right: 14px;
padding-left: 14px;
}
.hb-prime-title {
font-size: clamp(39px, 11.8vw, 51px);
letter-spacing: -1.7px;
}
.hb-prime-title-white {
/*
Permite que “VIVE EL CUMPLEAÑOS”
ocupe dos líneas sin salirse.
*/
max-width: 100%;
}
.hb-prime-description {
font-size: 13px;
}
.hb-prime-price strong {
font-size: clamp(52px, 15vw, 65px);
}
.hb-prime-visual {
min-height: 525px;
}
.hb-prime-main-image {
inset:
6%
0
23%;
}
.hb-prime-people-badge {
max-width: 55%;
}
.hb-prime-characters {
width: calc(100% - 58px);
max-width: calc(100% - 58px);
}
}
/* =========================================================
CELULARES MUY PEQUEÑOS
========================================================= */
@media (max-width: 375px) {
.hb-prime-container {
padding-right: 11px;
padding-left: 11px;
}
.hb-prime-title {
font-size: clamp(37px, 11.6vw, 46px);
letter-spacing: -1.4px;
}
.hb-prime-eyebrow {
max-width: 100%;
font-size: 7px;
letter-spacing: 0.7px;
}
.hb-prime-benefits {
gap: 9px 7px;
}
.hb-prime-benefit p {
font-size: 8.7px;
}
.hb-prime-price strong {
font-size: 54px;
}
.hb-prime-whatsapp-button {
padding-right: 11px;
padding-left: 11px;
}
.hb-prime-button-copy strong {
font-size: 9.5px;
}
.hb-prime-visual {
min-height: 490px;
}
.hb-prime-people-badge {
max-width: 58%;
}
.hb-prime-characters {
width: calc(100% - 48px);
max-width: calc(100% - 48px);
padding: 12px;
}
.hb-prime-characters-title strong {
font-size: 14px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-806de3c *//* =========================================
SECCIÓN 2 | EXPERIENCIA PRIME
========================================= */
.hb-experience,
.hb-experience *,
.hb-experience *::before,
.hb-experience *::after {
box-sizing: border-box;
}
.hb-experience {
--hb-exp-red: #e50914;
--hb-exp-red-dark: #a90009;
--hb-exp-white: #ffffff;
--hb-exp-black: #080808;
--hb-exp-green: #39ff14;
--hb-exp-green-light: #79ff61;
--hb-exp-green-dark: #1fd007;
position: relative;
width: 100%;
overflow: hidden;
isolation: isolate;
padding: clamp(85px, 9vw, 135px) 0;
background:
radial-gradient(
circle at 12% 35%,
rgba(229, 9, 20, 0.12),
transparent 28%
),
linear-gradient(
145deg,
#070707 0%,
#111111 47%,
#070707 100%
);
color: var(--hb-exp-white);
font-family: "Montserrat", sans-serif;
}
.hb-experience-container {
position: relative;
z-index: 5;
width: min(1400px, calc(100% - 48px));
margin: 0 auto;
}
/* =========================================
FONDO
========================================= */
.hb-experience-background {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hb-experience-background::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.18;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);
background-size: 48px 48px;
}
.hb-experience-background::after {
content: "";
position: absolute;
top: 14%;
right: -230px;
width: 560px;
height: 560px;
border: 2px solid rgba(229, 9, 20, 0.2);
border-radius: 50%;
box-shadow:
0 0 80px rgba(229, 9, 20, 0.12),
inset 0 0 80px rgba(229, 9, 20, 0.08);
animation: hbExperienceRotate 34s linear infinite;
}
.hb-experience-glow {
position: absolute;
border-radius: 50%;
filter: blur(30px);
}
.hb-experience-glow-one {
top: 16%;
left: -250px;
width: 520px;
height: 520px;
background: rgba(229, 9, 20, 0.14);
animation: hbExperienceGlow 7s ease-in-out infinite;
}
.hb-experience-glow-two {
right: -230px;
bottom: 5%;
width: 500px;
height: 500px;
background: rgba(229, 9, 20, 0.1);
animation: hbExperienceGlow 9s ease-in-out infinite reverse;
}
.hb-experience-ray {
position: absolute;
color: var(--hb-exp-red);
font-size: 90px;
font-weight: 900;
opacity: 0.09;
filter: drop-shadow(0 0 20px rgba(229, 9, 20, 0.7));
}
.hb-experience-ray-one {
top: 23%;
right: 3%;
transform: rotate(17deg);
animation: hbExperienceFloat 6s ease-in-out infinite;
}
.hb-experience-ray-two {
bottom: 12%;
left: 2%;
font-size: 65px;
transform: rotate(-18deg);
animation: hbExperienceFloat 5s ease-in-out infinite reverse;
}
.hb-experience-spark {
position: absolute;
color: var(--hb-exp-red);
filter: drop-shadow(0 0 12px rgba(229, 9, 20, 0.7));
animation: hbExperienceSpark 2.8s ease-in-out infinite;
}
.hb-experience-spark-one {
top: 12%;
left: 8%;
font-size: 25px;
}
.hb-experience-spark-two {
top: 48%;
right: 5%;
font-size: 36px;
animation-delay: 0.8s;
}
.hb-experience-spark-three {
bottom: 7%;
left: 42%;
font-size: 19px;
animation-delay: 1.3s;
}
.hb-experience-shield {
position: absolute;
right: 9%;
bottom: -42px;
display: grid;
place-items: center;
width: 145px;
height: 170px;
background: rgba(229, 9, 20, 0.05);
border: 2px solid rgba(229, 9, 20, 0.15);
color: rgba(229, 9, 20, 0.24);
font-size: 52px;
clip-path: polygon(
50% 0,
93% 17%,
87% 70%,
50% 100%,
13% 70%,
7% 17%
);
transform: rotate(9deg);
}
/* =========================================
ENCABEZADO
========================================= */
.hb-experience-heading {
max-width: 850px;
margin: 0 auto clamp(55px, 6vw, 82px);
text-align: center;
}
.hb-experience-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 17px;
padding: 9px 14px;
border: 1px solid rgba(229, 9, 20, 0.5);
border-radius: 999px;
background: rgba(229, 9, 20, 0.08);
color: rgba(255, 255, 255, 0.88);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.8px;
backdrop-filter: blur(12px);
}
.hb-experience-eyebrow span {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--hb-exp-red);
color: var(--hb-exp-white);
box-shadow: 0 0 15px rgba(229, 9, 20, 0.38);
}
.hb-experience-title {
margin: 0;
color: var(--hb-exp-white);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(50px, 6vw, 88px);
font-weight: 900;
line-height: 0.9;
letter-spacing: -1.8px;
text-transform: uppercase;
}
.hb-experience-title span {
position: relative;
display: inline-block;
color: var(--hb-exp-red);
}
.hb-experience-title span::after {
content: "";
position: absolute;
right: 0;
bottom: -9px;
left: 0;
height: 7px;
border-radius: 99px;
background: var(--hb-exp-red);
box-shadow: 0 0 20px rgba(229, 9, 20, 0.45);
transform: skewX(-18deg);
}
.hb-experience-intro {
max-width: 680px;
margin: 27px auto 0;
color: rgba(255, 255, 255, 0.68);
font-size: clamp(15px, 1.4vw, 18px);
font-weight: 500;
line-height: 1.65;
}
/* =========================================
GRID
========================================= */
.hb-experience-grid {
display: grid;
grid-template-columns:
minmax(360px, 0.72fr)
minmax(0, 1.28fr);
align-items: center;
gap: clamp(45px, 6vw, 90px);
}
/* =========================================
VIDEO
========================================= */
.hb-experience-video-column {
min-width: 0;
}
.hb-experience-video-stage {
position: relative;
width: min(100%, 470px);
min-height: 715px;
margin: 0 auto;
}
.hb-experience-video-energy {
position: absolute;
top: 6%;
left: 2%;
width: 96%;
height: 87%;
border-radius: 45% 55% 48% 52% / 58% 45% 55% 42%;
background:
radial-gradient(
circle,
rgba(229, 9, 20, 0.58),
rgba(229, 9, 20, 0.13) 52%,
transparent 72%
);
filter: blur(4px);
animation: hbExperienceEnergy 6s ease-in-out infinite;
}
.hb-experience-video-energy::before,
.hb-experience-video-energy::after {
content: "";
position: absolute;
inset: 6%;
border: 2px solid rgba(229, 9, 20, 0.28);
border-radius: inherit;
transform: rotate(8deg);
}
.hb-experience-video-energy::after {
inset: 14%;
border-style: dashed;
transform: rotate(-10deg);
animation: hbExperienceRotate 24s linear infinite;
}
.hb-experience-video-frame {
position: absolute;
inset: 3% 9% 5%;
overflow: hidden;
border: 6px solid rgba(255, 255, 255, 0.94);
border-radius: 42px;
background-image:
linear-gradient(
to top,
rgba(0, 0, 0, 0.72),
transparent 48%
),
var(--hb-exp-video-poster);
background-position: center;
background-size: cover;
box-shadow:
0 35px 70px rgba(0, 0, 0, 0.55),
0 0 0 2px rgba(229, 9, 20, 0.75),
0 0 45px rgba(229, 9, 20, 0.2);
transform: rotate(-1.5deg);
transition: transform 0.5s ease;
}
.hb-experience-video-frame:hover {
transform: rotate(0deg) scale(1.012);
}
.hb-experience-video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hb-experience-video-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(0, 0, 0, 0.75),
transparent 50%
),
linear-gradient(
135deg,
rgba(229, 9, 20, 0.12),
transparent 40%
);
}
.hb-experience-video-caption {
position: absolute;
right: 22px;
bottom: 22px;
left: 22px;
z-index: 3;
display: flex;
align-items: center;
gap: 11px;
padding: 13px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
background: rgba(8, 8, 8, 0.72);
backdrop-filter: blur(14px);
}
.hb-experience-video-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--hb-exp-red);
color: var(--hb-exp-white);
font-size: 13px;
box-shadow: 0 0 20px rgba(229, 9, 20, 0.45);
animation: hbExperiencePlayPulse 2s ease-in-out infinite;
}
.hb-experience-video-caption > span:last-child {
display: flex;
flex-direction: column;
}
.hb-experience-video-caption small {
color: #ff878d;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.8px;
}
.hb-experience-video-caption strong {
margin-top: 2px;
color: var(--hb-exp-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 18px;
font-weight: 900;
}
.hb-experience-video-badge {
position: absolute;
top: 0;
right: -3%;
z-index: 6;
display: flex;
align-items: center;
gap: 9px;
padding: 12px 15px;
border: 1px solid rgba(229, 9, 20, 0.6);
border-radius: 16px;
background: rgba(8, 8, 8, 0.94);
box-shadow: 0 16px 35px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(14px);
animation: hbExperienceBadgeFloat 4.5s ease-in-out infinite;
}
.hb-experience-video-badge > span {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
background: var(--hb-exp-red);
box-shadow: 0 0 15px rgba(229, 9, 20, 0.35);
}
.hb-experience-video-badge div {
display: flex;
flex-direction: column;
}
.hb-experience-video-badge small {
color: #ff7e85;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.5px;
}
.hb-experience-video-badge strong {
color: var(--hb-exp-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 15px;
font-weight: 900;
}
.hb-experience-video-seal {
position: absolute;
bottom: 4%;
left: -2%;
z-index: 6;
display: flex;
width: 105px;
height: 105px;
flex-direction: column;
align-items: center;
justify-content: center;
border: 4px solid var(--hb-exp-white);
border-radius: 50%;
background:
linear-gradient(
145deg,
var(--hb-exp-red),
#a90009
);
box-shadow:
0 18px 35px rgba(0, 0, 0, 0.4),
0 0 0 3px var(--hb-exp-black),
0 0 25px rgba(229, 9, 20, 0.35);
transform: rotate(-9deg);
animation: hbExperienceSeal 4s ease-in-out infinite;
}
.hb-experience-video-seal::before {
content: "";
position: absolute;
inset: 7px;
border: 1px dashed rgba(255, 255, 255, 0.55);
border-radius: 50%;
}
.hb-experience-video-seal > * {
position: relative;
z-index: 2;
}
.hb-experience-video-seal small {
font-size: 7px;
font-weight: 900;
letter-spacing: 1.5px;
}
.hb-experience-video-seal strong {
font-family: "Barlow Condensed", sans-serif;
font-size: 38px;
font-weight: 900;
line-height: 0.85;
}
.hb-experience-video-seal span {
font-size: 7px;
font-weight: 900;
letter-spacing: 1px;
}
/* =========================================
CARDS
========================================= */
.hb-experience-content {
display: flex;
min-width: 0;
flex-direction: column;
gap: 16px;
}
.hb-experience-feature {
position: relative;
overflow: hidden;
padding: clamp(20px, 2.3vw, 28px);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 24px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.025)
);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.22),
inset 0 0 25px rgba(255, 255, 255, 0.015);
backdrop-filter: blur(15px);
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
.hb-experience-feature:hover {
border-color: rgba(229, 9, 20, 0.62);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.3),
0 0 30px rgba(229, 9, 20, 0.08);
transform: translateY(-5px);
}
.hb-experience-character {
border-color: rgba(229, 9, 20, 0.55);
background:
linear-gradient(
135deg,
rgba(229, 9, 20, 0.17),
rgba(255, 255, 255, 0.025) 65%
);
}
.hb-experience-feature-top {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 13px;
}
.hb-experience-feature-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 50px;
height: 57px;
background: var(--hb-exp-red);
color: var(--hb-exp-white);
font-size: 19px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
filter:
drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25))
drop-shadow(0 0 10px rgba(229, 9, 20, 0.35));
}
.hb-experience-feature-heading {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
}
.hb-experience-feature-heading > span {
color: #ff7d84;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.8px;
}
.hb-experience-feature-heading h3 {
margin: 2px 0 0;
color: var(--hb-exp-white);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(24px, 2.2vw, 32px);
font-weight: 900;
line-height: 1;
}
.hb-experience-feature-badge {
flex: 0 0 auto;
padding: 7px 10px;
border-radius: 999px;
background: var(--hb-exp-red);
color: var(--hb-exp-white);
font-size: 7px;
font-weight: 900;
letter-spacing: 1.4px;
box-shadow: 0 0 18px rgba(229, 9, 20, 0.25);
}
.hb-experience-feature > p {
position: relative;
z-index: 2;
margin: 17px 0;
color: rgba(255, 255, 255, 0.72);
font-size: 13px;
font-weight: 500;
line-height: 1.65;
}
.hb-experience-feature-light {
position: absolute;
top: -110%;
left: -30%;
width: 18%;
height: 320%;
background: rgba(255, 255, 255, 0.12);
transform: rotate(22deg);
animation: hbExperienceCardLight 5s ease-in-out infinite;
}
.hb-experience-characters {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.hb-experience-characters span {
padding: 7px 10px;
border: 1px solid rgba(229, 9, 20, 0.35);
border-radius: 999px;
background: rgba(229, 9, 20, 0.08);
color: rgba(255, 255, 255, 0.9);
font-size: 9px;
font-weight: 750;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.hb-experience-characters span:hover {
background: var(--hb-exp-red);
transform: translateY(-2px);
}
/* Flyer */
.hb-experience-flyer-flow {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto
minmax(0, 1fr)
auto
minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.hb-experience-flyer-step {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 9px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.055);
}
.hb-experience-flyer-step strong {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 25px;
height: 25px;
border-radius: 8px;
background: var(--hb-exp-red);
color: var(--hb-exp-white);
font-size: 10px;
}
.hb-experience-flyer-step span {
color: rgba(255, 255, 255, 0.78);
font-size: 8px;
font-weight: 800;
line-height: 1.25;
}
.hb-experience-flow-arrow {
color: var(--hb-exp-red);
font-size: 17px;
animation: hbExperienceArrow 1.8s ease-in-out infinite;
}
/* Tarjetas imágenes */
.hb-experience-mini-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.hb-experience-mini-card {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 21px;
background: rgba(255, 255, 255, 0.045);
box-shadow: 0 17px 38px rgba(0, 0, 0, 0.2);
transition:
transform 0.35s ease,
border-color 0.35s ease;
}
.hb-experience-mini-card:hover {
border-color: rgba(229, 9, 20, 0.55);
transform: translateY(-5px);
}
.hb-experience-mini-image {
position: relative;
min-height: 145px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hb-experience-mini-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0, 0, 0, 0.72),
transparent 60%
);
}
.hb-experience-decoration-image {
background-image: var(--hb-exp-decoration-image);
}
.hb-experience-cake-image {
background-image: var(--hb-exp-cake-image);
}
.hb-experience-mini-label {
position: absolute;
right: 12px;
bottom: 11px;
z-index: 2;
padding: 6px 9px;
border-radius: 999px;
background: var(--hb-exp-red);
color: var(--hb-exp-white);
font-size: 6px;
font-weight: 900;
letter-spacing: 1.2px;
}
.hb-experience-mini-content {
display: flex;
gap: 11px;
padding: 15px;
}
.hb-experience-mini-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(229, 9, 20, 0.14);
font-size: 18px;
}
.hb-experience-mini-content h3 {
margin: 0 0 5px;
color: var(--hb-exp-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 20px;
font-weight: 900;
}
.hb-experience-mini-content p {
margin: 0;
color: rgba(255, 255, 255, 0.58);
font-size: 9px;
font-weight: 500;
line-height: 1.5;
}
/* Extras */
.hb-experience-extras {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.hb-experience-extra {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 15px;
background: rgba(255, 255, 255, 0.035);
}
.hb-experience-extra > span {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(229, 9, 20, 0.13);
font-size: 16px;
}
.hb-experience-extra div {
display: flex;
min-width: 0;
flex-direction: column;
}
.hb-experience-extra strong {
color: var(--hb-exp-white);
font-size: 9px;
font-weight: 850;
}
.hb-experience-extra small {
margin-top: 2px;
color: rgba(255, 255, 255, 0.48);
font-size: 7px;
line-height: 1.3;
}
/* =========================================
CTA FINAL
========================================= */
.hb-experience-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-top: clamp(55px, 6vw, 80px);
padding: 20px;
border: 1px solid rgba(229, 9, 20, 0.38);
border-radius: 23px;
background:
linear-gradient(
110deg,
rgba(229, 9, 20, 0.13),
rgba(255, 255, 255, 0.035)
);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24);
backdrop-filter: blur(14px);
}
.hb-experience-bottom-copy {
display: flex;
align-items: center;
gap: 14px;
}
.hb-experience-bottom-shield {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 55px;
height: 62px;
background: var(--hb-exp-red);
font-size: 24px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
}
.hb-experience-bottom-copy div {
display: flex;
flex-direction: column;
}
.hb-experience-bottom-copy small {
color: #ff7e85;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.7px;
}
.hb-experience-bottom-copy strong {
max-width: 560px;
margin-top: 4px;
color: var(--hb-exp-white);
font-size: clamp(14px, 1.4vw, 18px);
line-height: 1.4;
}
/* Botón verde neón */
.hb-experience-button {
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 11px;
min-width: 330px;
min-height: 70px;
padding: 12px 18px;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 18px;
background:
linear-gradient(
180deg,
var(--hb-exp-green-light) 0%,
var(--hb-exp-green) 45%,
var(--hb-exp-green-dark) 100%
);
color: #061105;
text-decoration: none;
box-shadow:
0 0 15px rgba(57, 255, 20, 0.8),
0 0 35px rgba(57, 255, 20, 0.55),
0 18px 40px rgba(57, 255, 20, 0.28);
transition:
transform 0.32s ease,
box-shadow 0.32s ease,
filter 0.32s ease;
}
.hb-experience-button:hover {
transform: translateY(-5px) scale(1.025);
filter: brightness(1.08);
box-shadow:
0 0 22px rgba(57, 255, 20, 1),
0 0 50px rgba(57, 255, 20, 0.78),
0 0 85px rgba(57, 255, 20, 0.42),
0 24px 50px rgba(0, 0, 0, 0.35);
}
.hb-experience-button-energy {
position: absolute;
inset: -4px;
z-index: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.hb-experience-button-energy::before {
content: "";
position: absolute;
top: -60%;
left: -35%;
width: 28%;
height: 220%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.9),
transparent
);
filter: blur(8px);
transform: rotate(20deg);
animation: hbExperienceNeonSweep 2.8s linear infinite;
}
.hb-experience-button-energy::after {
content: "";
position: absolute;
inset: 3px;
border: 1px solid rgba(255, 255, 255, 0.44);
border-radius: 14px;
opacity: 0.55;
}
.hb-experience-button-shine {
position: absolute;
top: -80%;
left: -40%;
z-index: 1;
width: 24%;
height: 280%;
background: rgba(255, 255, 255, 0.3);
transform: rotate(22deg);
animation: hbExperienceButtonShine 3.6s ease-in-out infinite;
}
.hb-experience-whatsapp-icon {
position: relative;
z-index: 2;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 39px;
height: 39px;
border-radius: 50%;
background: rgba(5, 30, 3, 0.16);
box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2);
animation: hbExperienceWhatsappPulse 1.6s ease-in-out infinite;
}
.hb-experience-whatsapp-icon svg {
width: 26px;
height: 26px;
fill: #071306;
}
.hb-experience-button-copy {
position: relative;
z-index: 2;
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
}
.hb-experience-button-copy strong {
color: #061105;
font-size: 10px;
font-weight: 950;
letter-spacing: 0.3px;
}
.hb-experience-button-copy small {
margin-top: 3px;
color: rgba(6, 17, 5, 0.73);
font-size: 8px;
font-weight: 750;
}
.hb-experience-button b {
position: relative;
z-index: 2;
color: #061105;
font-size: 22px;
transition: transform 0.3s ease;
}
.hb-experience-button:hover b {
transform: translateX(5px);
}
/* =========================================
ANIMACIONES
========================================= */
@keyframes hbExperienceRotate {
to {
transform: rotate(360deg);
}
}
@keyframes hbExperienceGlow {
0%,
100% {
opacity: 0.6;
transform: scale(0.94);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
@keyframes hbExperienceFloat {
0%,
100% {
translate: 0 0;
}
50% {
translate: 0 -18px;
}
}
@keyframes hbExperienceSpark {
0%,
100% {
opacity: 0.3;
transform: scale(0.8) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1.3) rotate(18deg);
}
}
@keyframes hbExperienceEnergy {
0%,
100% {
transform: scale(0.97) rotate(0deg);
}
50% {
transform: scale(1.04) rotate(2deg);
}
}
@keyframes hbExperienceBadgeFloat {
0%,
100% {
transform: translateY(0) rotate(2deg);
}
50% {
transform: translateY(-10px) rotate(-1deg);
}
}
@keyframes hbExperienceSeal {
0%,
100% {
transform: translateY(0) rotate(-9deg);
}
50% {
transform: translateY(-10px) rotate(-4deg);
}
}
@keyframes hbExperiencePlayPulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.45);
}
50% {
box-shadow: 0 0 0 9px rgba(229, 9, 20, 0);
}
}
@keyframes hbExperienceCardLight {
0%,
30% {
left: -30%;
}
60%,
100% {
left: 125%;
}
}
@keyframes hbExperienceArrow {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(3px);
}
}
@keyframes hbExperienceButtonShine {
0%,
30% {
left: -45%;
}
65%,
100% {
left: 130%;
}
}
@keyframes hbExperienceNeonSweep {
from {
transform: translateX(-120%) rotate(20deg);
}
to {
transform: translateX(620%) rotate(20deg);
}
}
@keyframes hbExperienceWhatsappPulse {
0%,
100% {
transform: scale(1);
filter: drop-shadow(0 0 3px rgba(57, 255, 20, 0.5));
}
50% {
transform: scale(1.14);
filter:
drop-shadow(0 0 8px rgba(255, 255, 255, 0.7))
drop-shadow(0 0 17px rgba(57, 255, 20, 1));
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1100px) {
.hb-experience-grid {
grid-template-columns:
minmax(330px, 0.75fr)
minmax(0, 1.25fr);
gap: 38px;
}
.hb-experience-video-stage {
min-height: 650px;
}
.hb-experience-extras {
grid-template-columns: 1fr;
}
.hb-experience-bottom {
align-items: stretch;
flex-direction: column;
}
.hb-experience-button {
width: 100%;
min-width: 0;
justify-content: center;
}
}
/* =========================================
TABLET VERTICAL
========================================= */
@media (max-width: 850px) {
.hb-experience {
padding: 80px 0;
}
.hb-experience-container {
width: min(100% - 28px, 720px);
}
.hb-experience-heading {
margin-bottom: 55px;
}
.hb-experience-grid {
grid-template-columns: minmax(0, 1fr);
gap: 55px;
}
.hb-experience-video-stage {
width: min(100%, 480px);
min-height: 700px;
}
.hb-experience-content {
width: min(100%, 680px);
margin: 0 auto;
}
.hb-experience-extras {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* =========================================
MÓVIL
========================================= */
@media (max-width: 560px) {
.hb-experience {
padding: 68px 0;
}
.hb-experience-container {
width: min(100% - 22px, 500px);
}
.hb-experience-heading {
margin-bottom: 43px;
}
.hb-experience-eyebrow {
padding: 7px 10px;
font-size: 8px;
letter-spacing: 1.2px;
}
.hb-experience-eyebrow span {
width: 22px;
height: 22px;
font-size: 11px;
}
.hb-experience-title {
font-size: clamp(45px, 13vw, 62px);
line-height: 0.9;
letter-spacing: -1px;
}
.hb-experience-title span::after {
bottom: -6px;
height: 5px;
}
.hb-experience-intro {
margin-top: 23px;
font-size: 13px;
line-height: 1.55;
}
.hb-experience-grid {
gap: 44px;
}
.hb-experience-video-stage {
min-height: 575px;
}
.hb-experience-video-frame {
inset: 3% 5% 7%;
border-width: 5px;
border-radius: 32px;
}
.hb-experience-video-badge {
top: -2%;
right: 0;
padding: 9px 11px;
}
.hb-experience-video-badge > span {
width: 30px;
height: 30px;
}
.hb-experience-video-badge strong {
font-size: 12px;
}
.hb-experience-video-seal {
bottom: 5%;
left: 0;
width: 86px;
height: 86px;
}
.hb-experience-video-seal strong {
font-size: 31px;
}
.hb-experience-video-caption {
right: 14px;
bottom: 14px;
left: 14px;
padding: 10px;
}
.hb-experience-video-icon {
width: 36px;
height: 36px;
}
.hb-experience-video-caption strong {
font-size: 14px;
}
.hb-experience-feature {
padding: 18px;
border-radius: 19px;
}
.hb-experience-feature-icon {
width: 43px;
height: 49px;
font-size: 16px;
}
.hb-experience-feature-heading > span {
font-size: 6.5px;
letter-spacing: 1.2px;
}
.hb-experience-feature-heading h3 {
font-size: 23px;
}
.hb-experience-feature-badge {
padding: 6px 8px;
font-size: 6px;
}
.hb-experience-feature > p {
margin: 14px 0;
font-size: 11px;
line-height: 1.55;
}
.hb-experience-characters {
gap: 5px;
}
.hb-experience-characters span {
padding: 6px 8px;
font-size: 7.5px;
}
.hb-experience-flyer-flow {
grid-template-columns: 1fr;
gap: 6px;
}
.hb-experience-flow-arrow {
display: none;
}
.hb-experience-flyer-step {
min-height: 40px;
}
.hb-experience-mini-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.hb-experience-mini-image {
min-height: 175px;
}
.hb-experience-extras {
grid-template-columns: 1fr;
}
.hb-experience-extra {
min-height: 55px;
}
.hb-experience-bottom {
gap: 18px;
margin-top: 46px;
padding: 16px;
border-radius: 19px;
}
.hb-experience-bottom-copy {
align-items: flex-start;
}
.hb-experience-bottom-shield {
width: 45px;
height: 51px;
font-size: 19px;
}
.hb-experience-bottom-copy small {
font-size: 6px;
letter-spacing: 1.1px;
}
.hb-experience-bottom-copy strong {
font-size: 12px;
}
.hb-experience-button {
width: 100%;
min-width: 0;
min-height: 68px;
gap: 9px;
padding: 11px 13px;
box-shadow:
0 0 12px rgba(57, 255, 20, 0.72),
0 0 25px rgba(57, 255, 20, 0.42),
0 15px 32px rgba(57, 255, 20, 0.2);
}
.hb-experience-whatsapp-icon {
width: 36px;
height: 36px;
}
.hb-experience-whatsapp-icon svg {
width: 23px;
height: 23px;
}
.hb-experience-button-copy strong {
font-size: 9px;
}
.hb-experience-button-copy small {
font-size: 7px;
}
}
/* =========================================
MÓVILES PEQUEÑOS
========================================= */
@media (max-width: 390px) {
.hb-experience-container {
width: calc(100% - 18px);
}
.hb-experience-title {
font-size: clamp(42px, 13vw, 53px);
}
.hb-experience-video-stage {
min-height: 520px;
}
.hb-experience-feature-top {
gap: 9px;
}
.hb-experience-feature-heading h3 {
font-size: 21px;
}
.hb-experience-feature-badge {
display: none;
}
.hb-experience-button {
gap: 7px;
padding: 10px;
}
.hb-experience-button-copy strong {
font-size: 8px;
}
.hb-experience-button b {
font-size: 18px;
}
}
/* =========================================
ACCESIBILIDAD
========================================= */
@media (prefers-reduced-motion: reduce) {
.hb-experience *,
.hb-experience *::before,
.hb-experience *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-db0500a *//* =========================================
SECCIÓN 3 | COMBOS PRIME
========================================= */
.hb-combos,
.hb-combos *,
.hb-combos *::before,
.hb-combos *::after {
box-sizing: border-box;
}
.hb-combos {
--hb-combos-red: #e50914;
--hb-combos-red-light: #ff3540;
--hb-combos-red-dark: #a90009;
--hb-combos-red-deep: #630006;
--hb-combos-white: #ffffff;
--hb-combos-black: #080808;
--hb-combos-dark: #101010;
--hb-combos-green: #39ff14;
--hb-combos-green-light: #79ff61;
--hb-combos-green-dark: #1fd007;
position: relative;
width: 100%;
overflow: hidden;
isolation: isolate;
padding: clamp(90px, 9vw, 140px) 0;
background:
radial-gradient(
circle at 50% 5%,
rgba(229, 9, 20, 0.12),
transparent 28%
),
linear-gradient(
180deg,
#080808 0%,
#121212 45%,
#080808 100%
);
color: var(--hb-combos-white);
font-family: "Montserrat", sans-serif;
}
.hb-combos-container {
position: relative;
z-index: 5;
width: min(1440px, calc(100% - 48px));
margin: 0 auto;
}
/* =========================================
FONDO
========================================= */
.hb-combos-background {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hb-combos-grid-pattern {
position: absolute;
inset: 0;
opacity: 0.17;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);
background-size: 48px 48px;
mask-image:
linear-gradient(
180deg,
transparent,
black 15%,
black 85%,
transparent
);
}
.hb-combos-glow {
position: absolute;
border-radius: 50%;
filter: blur(35px);
}
.hb-combos-glow-one {
top: 11%;
left: -240px;
width: 520px;
height: 520px;
background: rgba(229, 9, 20, 0.14);
animation: hbCombosGlow 8s ease-in-out infinite;
}
.hb-combos-glow-two {
right: -270px;
bottom: 5%;
width: 580px;
height: 580px;
background: rgba(229, 9, 20, 0.11);
animation: hbCombosGlow 9s ease-in-out infinite reverse;
}
.hb-combos-ray {
position: absolute;
display: block;
width: 42px;
height: 150px;
background: var(--hb-combos-red);
opacity: 0.12;
clip-path: polygon(
55% 0,
100% 0,
65% 43%,
100% 43%,
20% 100%,
40% 56%,
0 56%
);
filter: drop-shadow(
0 0 15px rgba(229, 9, 20, 0.7)
);
}
.hb-combos-ray-one {
top: 19%;
right: 2%;
transform: rotate(15deg);
animation: hbCombosFloat 6s ease-in-out infinite;
}
.hb-combos-ray-two {
bottom: 18%;
left: 2%;
width: 28px;
height: 105px;
transform: rotate(-17deg);
animation: hbCombosFloat 5s ease-in-out infinite reverse;
}
.hb-combos-spark {
position: absolute;
color: var(--hb-combos-red);
filter: drop-shadow(
0 0 12px rgba(229, 9, 20, 0.7)
);
animation: hbCombosSpark 2.8s ease-in-out infinite;
}
.hb-combos-spark-one {
top: 8%;
left: 11%;
font-size: 26px;
}
.hb-combos-spark-two {
top: 43%;
right: 5%;
font-size: 34px;
animation-delay: 0.8s;
}
.hb-combos-spark-three {
bottom: 9%;
left: 44%;
font-size: 21px;
animation-delay: 1.3s;
}
.hb-combos-shield {
position: absolute;
right: 6%;
bottom: -55px;
display: grid;
place-items: center;
width: 170px;
height: 195px;
border: 2px solid rgba(229, 9, 20, 0.15);
background: rgba(229, 9, 20, 0.045);
color: rgba(229, 9, 20, 0.18);
font-family: "Barlow Condensed", sans-serif;
font-size: 72px;
font-weight: 900;
clip-path: polygon(
50% 0,
93% 17%,
87% 70%,
50% 100%,
13% 70%,
7% 17%
);
transform: rotate(10deg);
}
/* =========================================
ENCABEZADO
========================================= */
.hb-combos-heading {
max-width: 920px;
margin: 0 auto clamp(45px, 5vw, 70px);
text-align: center;
}
.hb-combos-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
padding: 9px 14px;
border: 1px solid rgba(229, 9, 20, 0.5);
border-radius: 999px;
background: rgba(229, 9, 20, 0.08);
color: rgba(255, 255, 255, 0.88);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.8px;
backdrop-filter: blur(12px);
}
.hb-combos-eyebrow span {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--hb-combos-red);
color: var(--hb-combos-white);
font-size: 11px;
box-shadow:
0 0 15px rgba(229, 9, 20, 0.42);
}
.hb-combos-title {
margin: 0;
color: var(--hb-combos-white);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(52px, 6.3vw, 92px);
font-weight: 900;
line-height: 0.88;
letter-spacing: -2px;
text-transform: uppercase;
}
.hb-combos-title span {
position: relative;
display: inline-block;
color: var(--hb-combos-red);
}
.hb-combos-title span::after {
content: "";
position: absolute;
right: 0;
bottom: -9px;
left: 0;
height: 7px;
border-radius: 99px;
background: var(--hb-combos-red);
box-shadow:
0 0 20px rgba(229, 9, 20, 0.48);
transform: skewX(-18deg);
}
.hb-combos-intro {
max-width: 760px;
margin: 28px auto 0;
color: rgba(255, 255, 255, 0.68);
font-size: clamp(15px, 1.4vw, 18px);
font-weight: 500;
line-height: 1.65;
}
/* =========================================
INCLUYE SIEMPRE
========================================= */
.hb-combos-included {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: clamp(42px, 5vw, 62px);
padding: 20px 22px;
border: 1px solid rgba(229, 9, 20, 0.36);
border-radius: 22px;
background:
linear-gradient(
105deg,
rgba(229, 9, 20, 0.14),
rgba(255, 255, 255, 0.035)
);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.24),
inset 0 0 25px rgba(229, 9, 20, 0.025);
backdrop-filter: blur(14px);
}
.hb-combos-included-heading {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 13px;
}
.hb-combos-included-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 53px;
height: 60px;
background:
linear-gradient(
145deg,
var(--hb-combos-red),
var(--hb-combos-red-dark)
);
font-size: 23px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
filter: drop-shadow(
0 8px 12px rgba(0, 0, 0, 0.25)
);
}
.hb-combos-included-heading div {
display: flex;
flex-direction: column;
}
.hb-combos-included-heading small {
color: #ff8187;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.7px;
}
.hb-combos-included-heading strong {
margin-top: 3px;
color: var(--hb-combos-white);
font-size: 15px;
line-height: 1.3;
}
.hb-combos-included-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.hb-combos-included-list span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 11px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
color: rgba(255, 255, 255, 0.86);
font-size: 8px;
font-weight: 750;
}
.hb-combos-included-list b {
display: grid;
place-items: center;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--hb-combos-red);
color: var(--hb-combos-white);
font-size: 9px;
}
/* =========================================
GRID DE COMBOS
========================================= */
.hb-combos-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
gap: 18px;
}
/* =========================================
TARJETA
========================================= */
.hb-combo-card {
position: relative;
display: flex;
min-width: 0;
overflow: hidden;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 25px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.025)
);
box-shadow:
0 22px 48px rgba(0, 0, 0, 0.28),
inset 0 0 25px rgba(255, 255, 255, 0.018);
backdrop-filter: blur(15px);
transition:
transform 0.42s ease,
border-color 0.42s ease,
box-shadow 0.42s ease;
}
.hb-combo-card:hover {
z-index: 3;
border-color: rgba(229, 9, 20, 0.65);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.42),
0 0 35px rgba(229, 9, 20, 0.12);
transform: translateY(-10px);
}
.hb-combo-card-glow {
position: absolute;
top: -100px;
left: 50%;
z-index: 0;
width: 250px;
height: 250px;
border-radius: 50%;
background: rgba(229, 9, 20, 0.15);
filter: blur(40px);
opacity: 0;
transform: translateX(-50%);
transition: opacity 0.4s ease;
}
.hb-combo-card:hover .hb-combo-card-glow {
opacity: 1;
}
/* Imagen */
.hb-combo-image {
position: relative;
z-index: 2;
min-height: 245px;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: background-size 0.7s ease;
}
.hb-combo-card:hover .hb-combo-image {
background-size: 108%;
}
.hb-combo-classic-image {
background-image: var(--hb-combo-classic-image);
}
.hb-combo-family-image {
background-image: var(--hb-combo-family-image);
}
.hb-combo-mix-image {
background-image: var(--hb-combo-mix-image);
}
.hb-combo-happy-image {
background-image: var(--hb-combo-happy-image);
}
.hb-combo-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(7, 7, 7, 0.97) 0%,
rgba(7, 7, 7, 0.25) 52%,
rgba(229, 9, 20, 0.12) 100%
);
}
.hb-combo-number {
position: absolute;
top: 15px;
left: 15px;
z-index: 2;
display: grid;
place-items: center;
width: 43px;
height: 43px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 13px;
background: rgba(8, 8, 8, 0.72);
color: var(--hb-combos-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 19px;
font-weight: 900;
backdrop-filter: blur(12px);
}
.hb-combo-tag {
position: absolute;
right: 14px;
bottom: 14px;
z-index: 2;
padding: 7px 10px;
border-radius: 999px;
background: var(--hb-combos-red);
color: var(--hb-combos-white);
font-size: 6px;
font-weight: 900;
letter-spacing: 1.2px;
box-shadow:
0 0 18px rgba(229, 9, 20, 0.32);
}
/* Contenido */
.hb-combo-content {
position: relative;
z-index: 2;
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.hb-combo-name {
display: flex;
align-items: center;
gap: 11px;
}
.hb-combo-name-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 43px;
height: 43px;
border-radius: 13px;
background: rgba(229, 9, 20, 0.14);
font-size: 20px;
}
.hb-combo-name div {
display: flex;
min-width: 0;
flex-direction: column;
}
.hb-combo-name small {
color: #ff7f85;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.5px;
}
.hb-combo-name h3 {
margin: 2px 0 0;
color: var(--hb-combos-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 27px;
font-weight: 900;
line-height: 1;
}
.hb-combo-description {
min-height: 68px;
margin: 17px 0 0;
color: rgba(255, 255, 255, 0.6);
font-size: 10px;
font-weight: 500;
line-height: 1.55;
}
.hb-combo-divider {
width: 100%;
height: 1px;
margin: 18px 0;
background:
linear-gradient(
90deg,
rgba(229, 9, 20, 0.65),
rgba(255, 255, 255, 0.08),
transparent
);
}
.hb-combo-list {
display: flex;
flex: 1;
flex-direction: column;
gap: 10px;
margin: 0 0 22px;
padding: 0;
list-style: none;
}
.hb-combo-list li {
display: flex;
align-items: center;
gap: 9px;
color: rgba(255, 255, 255, 0.82);
font-size: 10px;
font-weight: 700;
line-height: 1.35;
}
.hb-combo-list li span {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 27px;
height: 27px;
border: 1px solid rgba(229, 9, 20, 0.4);
border-radius: 9px;
background: rgba(229, 9, 20, 0.12);
color: var(--hb-combos-white);
font-size: 10px;
font-weight: 900;
}
/* Botones secundarios */
.hb-combo-select-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 48px;
padding: 10px 13px;
border: 1px solid rgba(229, 9, 20, 0.55);
border-radius: 14px;
background: rgba(229, 9, 20, 0.08);
color: var(--hb-combos-white);
font-size: 9px;
font-weight: 900;
text-decoration: none;
transition:
background 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.hb-combo-select-button:hover {
border-color: var(--hb-combos-red);
background: var(--hb-combos-red);
box-shadow:
0 0 22px rgba(229, 9, 20, 0.3);
transform: translateY(-3px);
}
.hb-combo-select-button b {
font-size: 18px;
transition: transform 0.3s ease;
}
.hb-combo-select-button:hover b {
transform: translateX(4px);
}
/* =========================================
TARJETA DESTACADA
========================================= */
.hb-combo-featured {
border-color: rgba(229, 9, 20, 0.85);
background:
linear-gradient(
145deg,
rgba(229, 9, 20, 0.2),
rgba(255, 255, 255, 0.035) 55%,
rgba(229, 9, 20, 0.05)
);
box-shadow:
0 30px 65px rgba(0, 0, 0, 0.42),
0 0 0 4px rgba(229, 9, 20, 0.08),
0 0 38px rgba(229, 9, 20, 0.16);
transform: translateY(-14px);
}
.hb-combo-featured:hover {
transform: translateY(-22px) scale(1.015);
}
.hb-combo-featured-ribbon {
position: absolute;
top: 18px;
left: 50%;
z-index: 10;
display: flex;
align-items: center;
gap: 7px;
width: max-content;
padding: 8px 13px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
background:
linear-gradient(
135deg,
var(--hb-combos-red-light),
var(--hb-combos-red-dark)
);
color: var(--hb-combos-white);
font-size: 7px;
font-weight: 900;
letter-spacing: 1.3px;
box-shadow:
0 0 20px rgba(229, 9, 20, 0.5),
0 12px 25px rgba(0, 0, 0, 0.32);
transform: translateX(-50%);
animation: hbCombosRibbon 2.2s ease-in-out infinite;
}
.hb-combo-featured-energy {
position: absolute;
inset: -2px;
z-index: 1;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.hb-combo-featured-energy::before {
content: "";
position: absolute;
top: -90%;
left: -30%;
width: 16%;
height: 300%;
background: rgba(255, 255, 255, 0.18);
filter: blur(7px);
transform: rotate(20deg);
animation: hbCombosFeaturedSweep 4.5s ease-in-out infinite;
}
.hb-combo-featured-button {
border-color: var(--hb-combos-red);
background:
linear-gradient(
135deg,
var(--hb-combos-red-light),
var(--hb-combos-red-dark)
);
box-shadow:
0 0 22px rgba(229, 9, 20, 0.25);
}
.hb-combo-featured-button:hover {
filter: brightness(1.12);
box-shadow:
0 0 30px rgba(229, 9, 20, 0.5);
}
/* =========================================
RECORDATORIO
========================================= */
.hb-combos-reminder {
display: flex;
align-items: center;
gap: 20px;
margin-top: clamp(48px, 5vw, 70px);
padding: 20px 22px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 22px;
background:
linear-gradient(
105deg,
rgba(255, 255, 255, 0.06),
rgba(229, 9, 20, 0.1)
);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.24);
backdrop-filter: blur(14px);
}
.hb-combos-reminder-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 56px;
height: 63px;
background:
linear-gradient(
145deg,
var(--hb-combos-red),
var(--hb-combos-red-dark)
);
font-size: 24px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
}
.hb-combos-reminder-copy {
display: flex;
flex: 0 0 auto;
flex-direction: column;
}
.hb-combos-reminder-copy small {
color: #ff858b;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.6px;
}
.hb-combos-reminder-copy strong {
max-width: 350px;
margin-top: 4px;
color: var(--hb-combos-white);
font-size: 15px;
line-height: 1.35;
}
.hb-combos-reminder-items {
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: flex-end;
gap: 7px;
}
.hb-combos-reminder-items span {
padding: 7px 10px;
border: 1px solid rgba(229, 9, 20, 0.34);
border-radius: 999px;
background: rgba(229, 9, 20, 0.07);
color: rgba(255, 255, 255, 0.82);
font-size: 8px;
font-weight: 750;
}
/* =========================================
PRECIO FINAL
========================================= */
.hb-combos-price-section {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
margin-top: 24px;
padding: clamp(26px, 3vw, 38px);
overflow: hidden;
border: 1px solid rgba(229, 9, 20, 0.7);
border-radius: 26px;
background:
radial-gradient(
circle at 20% 50%,
rgba(255, 255, 255, 0.1),
transparent 32%
),
linear-gradient(
125deg,
var(--hb-combos-red-dark),
var(--hb-combos-red) 48%,
var(--hb-combos-red-deep)
);
box-shadow:
0 30px 65px rgba(0, 0, 0, 0.36),
0 0 42px rgba(229, 9, 20, 0.2);
}
.hb-combos-price-section::before {
content: "";
position: absolute;
right: -120px;
bottom: -180px;
width: 430px;
height: 430px;
border: 2px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
}
.hb-combos-price-section::after {
content: "PRIME";
position: absolute;
right: 33%;
bottom: -35px;
color: rgba(255, 255, 255, 0.045);
font-family: "Barlow Condensed", sans-serif;
font-size: 150px;
font-weight: 900;
line-height: 1;
pointer-events: none;
}
.hb-combos-price-decoration span {
position: absolute;
color: rgba(255, 255, 255, 0.35);
animation: hbCombosPriceSpark 2.5s ease-in-out infinite;
}
.hb-combos-price-decoration span:nth-child(1) {
top: 18px;
right: 41%;
font-size: 22px;
}
.hb-combos-price-decoration span:nth-child(2) {
right: 8%;
bottom: 20px;
font-size: 30px;
animation-delay: 0.8s;
}
.hb-combos-price-decoration span:nth-child(3) {
bottom: 16px;
left: 38%;
font-size: 16px;
animation-delay: 1.2s;
}
.hb-combos-price-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
}
.hb-combos-price-label {
color: rgba(255, 255, 255, 0.68);
font-size: 8px;
font-weight: 900;
letter-spacing: 2px;
}
.hb-combos-price-title {
margin-top: 4px;
color: var(--hb-combos-white);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(28px, 3.1vw, 44px);
font-weight: 900;
line-height: 1;
}
.hb-combos-price {
display: flex;
align-items: flex-start;
margin-top: 3px;
color: var(--hb-combos-white);
font-family: "Barlow Condensed", sans-serif;
line-height: 0.88;
}
.hb-combos-price small {
margin-top: 10px;
margin-right: 4px;
font-size: 28px;
font-weight: 800;
}
.hb-combos-price > strong {
font-size: clamp(64px, 7vw, 95px);
font-weight: 900;
letter-spacing: -2px;
text-shadow:
0 8px 25px rgba(0, 0, 0, 0.28);
}
.hb-combos-schedule {
margin-top: 8px;
color: rgba(255, 255, 255, 0.82);
font-size: 10px;
font-weight: 850;
}
.hb-combos-price-action {
position: relative;
z-index: 2;
display: flex;
width: min(100%, 390px);
flex: 0 0 auto;
flex-direction: column;
gap: 11px;
}
/* =========================================
BOTÓN WHATSAPP NEÓN
========================================= */
.hb-combos-whatsapp-button {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 76px;
padding: 13px 17px;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.48);
border-radius: 19px;
background:
linear-gradient(
180deg,
var(--hb-combos-green-light) 0%,
var(--hb-combos-green) 46%,
var(--hb-combos-green-dark) 100%
);
color: #061105;
text-decoration: none;
box-shadow:
0 0 16px rgba(57, 255, 20, 0.88),
0 0 38px rgba(57, 255, 20, 0.58),
0 20px 45px rgba(0, 0, 0, 0.28);
transition:
transform 0.32s ease,
filter 0.32s ease,
box-shadow 0.32s ease;
}
.hb-combos-whatsapp-button:hover {
transform: translateY(-5px) scale(1.025);
filter: brightness(1.08);
box-shadow:
0 0 24px rgba(57, 255, 20, 1),
0 0 55px rgba(57, 255, 20, 0.82),
0 0 90px rgba(57, 255, 20, 0.46),
0 26px 55px rgba(0, 0, 0, 0.34);
}
.hb-combos-button-energy {
position: absolute;
inset: -4px;
z-index: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.hb-combos-button-energy::before {
content: "";
position: absolute;
top: -65%;
left: -36%;
width: 27%;
height: 230%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.95),
transparent
);
filter: blur(8px);
transform: rotate(20deg);
animation: hbCombosNeonSweep 2.9s linear infinite;
}
.hb-combos-button-energy::after {
content: "";
position: absolute;
inset: 3px;
border: 1px solid rgba(255, 255, 255, 0.48);
border-radius: 15px;
opacity: 0.55;
}
.hb-combos-button-shine {
position: absolute;
top: -85%;
left: -45%;
z-index: 1;
width: 24%;
height: 290%;
background: rgba(255, 255, 255, 0.28);
transform: rotate(22deg);
animation: hbCombosButtonShine 3.7s ease-in-out infinite;
}
.hb-combos-whatsapp-icon {
position: relative;
z-index: 2;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(5, 30, 3, 0.16);
box-shadow:
inset 0 0 8px rgba(255, 255, 255, 0.22);
animation: hbCombosWhatsappPulse 1.6s ease-in-out infinite;
}
.hb-combos-whatsapp-icon svg {
width: 28px;
height: 28px;
fill: #071306;
}
.hb-combos-button-copy {
position: relative;
z-index: 2;
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
}
.hb-combos-button-copy strong {
color: #061105;
font-size: 11px;
font-weight: 950;
letter-spacing: 0.3px;
}
.hb-combos-button-copy small {
margin-top: 3px;
color: rgba(6, 17, 5, 0.72);
font-size: 8px;
font-weight: 750;
}
.hb-combos-whatsapp-button > b {
position: relative;
z-index: 2;
color: #061105;
font-size: 24px;
transition: transform 0.3s ease;
}
.hb-combos-whatsapp-button:hover > b {
transform: translateX(5px);
}
.hb-combos-price-note {
color: rgba(255, 255, 255, 0.76);
font-size: 8px;
font-weight: 750;
text-align: center;
}
/* =========================================
ANIMACIONES
========================================= */
@keyframes hbCombosGlow {
0%,
100% {
opacity: 0.6;
transform: scale(0.94);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
@keyframes hbCombosFloat {
0%,
100% {
translate: 0 0;
}
50% {
translate: 0 -17px;
}
}
@keyframes hbCombosSpark {
0%,
100% {
opacity: 0.3;
transform: scale(0.8) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1.3) rotate(18deg);
}
}
@keyframes hbCombosRibbon {
0%,
100% {
box-shadow:
0 0 16px rgba(229, 9, 20, 0.38),
0 12px 25px rgba(0, 0, 0, 0.3);
transform: translateX(-50%) translateY(0);
}
50% {
box-shadow:
0 0 28px rgba(229, 9, 20, 0.7),
0 16px 30px rgba(0, 0, 0, 0.35);
transform: translateX(-50%) translateY(-3px);
}
}
@keyframes hbCombosFeaturedSweep {
0%,
30% {
left: -30%;
}
65%,
100% {
left: 130%;
}
}
@keyframes hbCombosPriceSpark {
0%,
100% {
opacity: 0.35;
transform: scale(0.8) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1.25) rotate(20deg);
}
}
@keyframes hbCombosNeonSweep {
from {
transform: translateX(-120%) rotate(20deg);
}
to {
transform: translateX(650%) rotate(20deg);
}
}
@keyframes hbCombosButtonShine {
0%,
30% {
left: -45%;
}
65%,
100% {
left: 130%;
}
}
@keyframes hbCombosWhatsappPulse {
0%,
100% {
transform: scale(1);
filter:
drop-shadow(
0 0 3px rgba(57, 255, 20, 0.5)
);
}
50% {
transform: scale(1.14);
filter:
drop-shadow(
0 0 8px rgba(255, 255, 255, 0.75)
)
drop-shadow(
0 0 18px rgba(57, 255, 20, 1)
);
}
}
/* =========================================
PORTÁTILES Y TABLETS GRANDES
========================================= */
@media (max-width: 1200px) {
.hb-combos-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.hb-combo-featured {
transform: none;
}
.hb-combo-featured:hover {
transform: translateY(-10px);
}
.hb-combo-image {
min-height: 290px;
}
.hb-combo-description {
min-height: auto;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.hb-combos {
padding: 85px 0;
}
.hb-combos-container {
width: min(100% - 28px, 760px);
}
.hb-combos-included {
align-items: flex-start;
flex-direction: column;
}
.hb-combos-included-list {
justify-content: flex-start;
}
.hb-combos-reminder {
align-items: flex-start;
flex-wrap: wrap;
}
.hb-combos-reminder-items {
flex-basis: 100%;
justify-content: flex-start;
}
.hb-combos-price-section {
align-items: stretch;
flex-direction: column;
}
.hb-combos-price-action {
width: 100%;
}
.hb-combos-price-section::after {
right: -10px;
bottom: -25px;
}
}
/* =========================================
MÓVIL
========================================= */
@media (max-width: 620px) {
.hb-combos {
padding: 70px 0;
}
.hb-combos-container {
width: min(100% - 22px, 520px);
}
.hb-combos-heading {
margin-bottom: 42px;
}
.hb-combos-eyebrow {
padding: 7px 10px;
font-size: 7.8px;
letter-spacing: 1.1px;
}
.hb-combos-eyebrow span {
width: 22px;
height: 22px;
font-size: 9px;
}
.hb-combos-title {
font-size: clamp(46px, 13vw, 64px);
line-height: 0.9;
letter-spacing: -1px;
}
.hb-combos-title span::after {
bottom: -6px;
height: 5px;
}
.hb-combos-intro {
margin-top: 24px;
font-size: 13px;
line-height: 1.55;
}
.hb-combos-included {
gap: 17px;
margin-bottom: 38px;
padding: 17px;
border-radius: 18px;
}
.hb-combos-included-icon {
width: 46px;
height: 52px;
font-size: 19px;
}
.hb-combos-included-heading small {
font-size: 6px;
letter-spacing: 1.1px;
}
.hb-combos-included-heading strong {
font-size: 12px;
}
.hb-combos-included-list {
gap: 6px;
}
.hb-combos-included-list span {
padding: 7px 9px;
font-size: 7px;
}
.hb-combos-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.hb-combo-card {
border-radius: 21px;
}
.hb-combo-featured {
order: -1;
}
.hb-combo-image {
min-height: 235px;
}
.hb-combo-content {
padding: 18px;
}
.hb-combo-name h3 {
font-size: 25px;
}
.hb-combo-description {
margin-top: 14px;
font-size: 10px;
}
.hb-combo-list {
margin-bottom: 18px;
}
.hb-combo-list li {
font-size: 10px;
}
.hb-combos-reminder {
gap: 14px;
margin-top: 40px;
padding: 17px;
border-radius: 18px;
}
.hb-combos-reminder-icon {
width: 47px;
height: 54px;
font-size: 19px;
}
.hb-combos-reminder-copy strong {
font-size: 12px;
}
.hb-combos-reminder-items {
gap: 5px;
}
.hb-combos-reminder-items span {
padding: 6px 8px;
font-size: 7px;
}
.hb-combos-price-section {
gap: 24px;
padding: 24px 18px;
border-radius: 21px;
text-align: center;
}
.hb-combos-price-copy {
align-items: center;
}
.hb-combos-price-label {
font-size: 7px;
letter-spacing: 1.4px;
}
.hb-combos-price-title {
font-size: 31px;
}
.hb-combos-price small {
margin-top: 8px;
font-size: 24px;
}
.hb-combos-price > strong {
font-size: clamp(67px, 20vw, 88px);
}
.hb-combos-whatsapp-button {
width: 100%;
min-height: 70px;
gap: 9px;
padding: 11px 13px;
text-align: left;
box-shadow:
0 0 12px rgba(57, 255, 20, 0.74),
0 0 26px rgba(57, 255, 20, 0.43),
0 16px 34px rgba(0, 0, 0, 0.24);
}
.hb-combos-whatsapp-icon {
width: 37px;
height: 37px;
}
.hb-combos-whatsapp-icon svg {
width: 24px;
height: 24px;
}
.hb-combos-button-copy strong {
font-size: 9px;
}
.hb-combos-button-copy small {
font-size: 7px;
}
.hb-combos-price-section::after {
display: none;
}
}
/* =========================================
MÓVILES PEQUEÑOS
========================================= */
@media (max-width: 390px) {
.hb-combos-container {
width: calc(100% - 18px);
}
.hb-combos-title {
font-size: clamp(42px, 13vw, 54px);
}
.hb-combo-image {
min-height: 210px;
}
.hb-combo-featured-ribbon {
padding: 7px 10px;
font-size: 6px;
}
.hb-combo-tag {
font-size: 5.5px;
}
.hb-combos-whatsapp-button {
padding: 10px;
}
.hb-combos-button-copy strong {
font-size: 8px;
}
.hb-combos-whatsapp-button > b {
font-size: 19px;
}
}
/* =========================================
ACCESIBILIDAD
========================================= */
@media (prefers-reduced-motion: reduce) {
.hb-combos *,
.hb-combos *::before,
.hb-combos *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-91913fc *//* =========================================
SECCIÓN 4 | TEMÁTICAS Y DECORACIONES
========================================= */
.hb-themes,
.hb-themes *,
.hb-themes *::before,
.hb-themes *::after {
box-sizing: border-box;
}
.hb-themes {
--hb-themes-red: #e50914;
--hb-themes-red-light: #ff3641;
--hb-themes-red-dark: #a90009;
--hb-themes-red-deep: #630006;
--hb-themes-white: #ffffff;
--hb-themes-black: #070707;
--hb-themes-dark: #111111;
--hb-themes-green: #39ff14;
--hb-themes-green-light: #79ff61;
--hb-themes-green-dark: #1fd007;
position: relative;
width: 100%;
overflow: hidden;
isolation: isolate;
padding: clamp(90px, 9vw, 140px) 0;
background:
radial-gradient(
circle at 50% 8%,
rgba(229, 9, 20, 0.13),
transparent 30%
),
linear-gradient(
180deg,
#070707 0%,
#111111 48%,
#070707 100%
);
color: var(--hb-themes-white);
font-family: "Montserrat", sans-serif;
}
.hb-themes-container {
position: relative;
z-index: 5;
width: min(1440px, calc(100% - 48px));
margin: 0 auto;
}
/* =========================================
FONDO
========================================= */
.hb-themes-background {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hb-themes-grid-pattern {
position: absolute;
inset: 0;
opacity: 0.16;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);
background-size: 48px 48px;
mask-image:
linear-gradient(
180deg,
transparent,
black 12%,
black 88%,
transparent
);
}
.hb-themes-glow {
position: absolute;
border-radius: 50%;
filter: blur(38px);
}
.hb-themes-glow-one {
top: 9%;
left: -240px;
width: 520px;
height: 520px;
background: rgba(229, 9, 20, 0.14);
animation: hbThemesGlow 8s ease-in-out infinite;
}
.hb-themes-glow-two {
right: -270px;
bottom: 6%;
width: 580px;
height: 580px;
background: rgba(229, 9, 20, 0.11);
animation: hbThemesGlow 9s ease-in-out infinite reverse;
}
.hb-themes-lightning {
position: absolute;
display: block;
width: 40px;
height: 145px;
background: var(--hb-themes-red);
opacity: 0.11;
clip-path: polygon(
55% 0,
100% 0,
65% 43%,
100% 43%,
20% 100%,
40% 56%,
0 56%
);
filter:
drop-shadow(
0 0 15px rgba(229, 9, 20, 0.7)
);
}
.hb-themes-lightning-one {
top: 20%;
right: 2%;
transform: rotate(15deg);
animation: hbThemesFloat 6s ease-in-out infinite;
}
.hb-themes-lightning-two {
bottom: 16%;
left: 2%;
width: 27px;
height: 102px;
transform: rotate(-18deg);
animation: hbThemesFloat 5s ease-in-out infinite reverse;
}
.hb-themes-spark {
position: absolute;
color: var(--hb-themes-red);
filter:
drop-shadow(
0 0 12px rgba(229, 9, 20, 0.7)
);
animation: hbThemesSpark 2.8s ease-in-out infinite;
}
.hb-themes-spark-one {
top: 7%;
left: 12%;
font-size: 27px;
}
.hb-themes-spark-two {
top: 47%;
right: 5%;
font-size: 35px;
animation-delay: 0.8s;
}
.hb-themes-spark-three {
bottom: 8%;
left: 43%;
font-size: 21px;
animation-delay: 1.3s;
}
.hb-themes-background-shield {
position: absolute;
right: 7%;
bottom: -58px;
display: grid;
place-items: center;
width: 180px;
height: 205px;
border: 2px solid rgba(229, 9, 20, 0.14);
background: rgba(229, 9, 20, 0.04);
color: rgba(229, 9, 20, 0.17);
font-family: "Barlow Condensed", sans-serif;
font-size: 60px;
font-weight: 900;
clip-path: polygon(
50% 0,
93% 17%,
87% 70%,
50% 100%,
13% 70%,
7% 17%
);
transform: rotate(10deg);
}
/* =========================================
ENCABEZADO
========================================= */
.hb-themes-heading {
max-width: 920px;
margin: 0 auto clamp(45px, 5vw, 68px);
text-align: center;
}
.hb-themes-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
padding: 9px 14px;
border: 1px solid rgba(229, 9, 20, 0.5);
border-radius: 999px;
background: rgba(229, 9, 20, 0.08);
color: rgba(255, 255, 255, 0.88);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.8px;
backdrop-filter: blur(12px);
}
.hb-themes-eyebrow span {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--hb-themes-red);
color: var(--hb-themes-white);
font-size: 11px;
box-shadow:
0 0 15px rgba(229, 9, 20, 0.42);
}
.hb-themes-title {
margin: 0;
color: var(--hb-themes-white);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(52px, 6.4vw, 94px);
font-weight: 900;
line-height: 0.88;
letter-spacing: -2px;
text-transform: uppercase;
}
.hb-themes-title span {
position: relative;
display: inline-block;
color: var(--hb-themes-red);
}
.hb-themes-title span::after {
content: "";
position: absolute;
right: 0;
bottom: -9px;
left: 0;
height: 7px;
border-radius: 99px;
background: var(--hb-themes-red);
box-shadow:
0 0 20px rgba(229, 9, 20, 0.5);
transform: skewX(-18deg);
}
.hb-themes-intro {
max-width: 760px;
margin: 28px auto 0;
color: rgba(255, 255, 255, 0.68);
font-size: clamp(15px, 1.4vw, 18px);
font-weight: 500;
line-height: 1.65;
}
/* =========================================
INFORMACIÓN SUPERIOR
========================================= */
.hb-themes-info {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 18px;
margin-bottom: clamp(38px, 4vw, 55px);
}
.hb-themes-info-main {
display: flex;
flex: 1;
align-items: center;
gap: 20px;
min-width: 0;
padding: 22px;
border: 1px solid rgba(229, 9, 20, 0.4);
border-radius: 23px;
background:
linear-gradient(
110deg,
rgba(229, 9, 20, 0.15),
rgba(255, 255, 255, 0.035)
);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.24);
backdrop-filter: blur(14px);
}
.hb-themes-info-shield {
position: relative;
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
justify-content: center;
width: 105px;
height: 122px;
background:
linear-gradient(
145deg,
var(--hb-themes-red),
var(--hb-themes-red-dark)
);
color: var(--hb-themes-white);
clip-path: polygon(
50% 0,
93% 17%,
87% 70%,
50% 100%,
13% 70%,
7% 17%
);
filter:
drop-shadow(
0 12px 18px rgba(0, 0, 0, 0.32)
)
drop-shadow(
0 0 16px rgba(229, 9, 20, 0.24)
);
}
.hb-themes-info-shield::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(255, 255, 255, 0.45);
clip-path: inherit;
}
.hb-themes-info-shield span,
.hb-themes-info-shield small {
position: relative;
z-index: 2;
}
.hb-themes-info-shield span {
font-family: "Barlow Condensed", sans-serif;
font-size: 42px;
font-weight: 900;
line-height: 0.9;
}
.hb-themes-info-shield small {
margin-top: 5px;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.2px;
}
.hb-themes-info-copy {
min-width: 0;
}
.hb-themes-info-copy > span {
color: #ff858b;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.7px;
}
.hb-themes-info-copy h3 {
max-width: 680px;
margin: 5px 0 8px;
color: var(--hb-themes-white);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(27px, 2.7vw, 39px);
font-weight: 900;
line-height: 1;
}
.hb-themes-info-copy h3 strong {
color: var(--hb-themes-red);
}
.hb-themes-info-copy p {
max-width: 680px;
margin: 0;
color: rgba(255, 255, 255, 0.61);
font-size: 11px;
font-weight: 500;
line-height: 1.6;
}
.hb-themes-highlight {
display: flex;
flex: 0 0 min(360px, 30%);
align-items: center;
gap: 13px;
min-width: 0;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 23px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.025)
);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(14px);
}
.hb-themes-highlight-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 50px;
height: 50px;
border-radius: 15px;
background: rgba(229, 9, 20, 0.15);
font-size: 24px;
}
.hb-themes-highlight div {
display: flex;
min-width: 0;
flex-direction: column;
}
.hb-themes-highlight small {
color: #ff8389;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.4px;
}
.hb-themes-highlight strong {
margin-top: 4px;
color: var(--hb-themes-white);
font-size: 12px;
line-height: 1.45;
}
/* =========================================
SLIDER INFINITO
========================================= */
.hb-themes-slider {
position: relative;
z-index: 4;
width: 100%;
overflow: hidden;
padding: 18px 0 38px;
}
.hb-themes-slider-track {
display: flex;
align-items: stretch;
gap: 18px;
width: max-content;
padding-left: 18px;
animation:
hbThemesInfiniteSlider 48s linear infinite;
will-change: transform;
}
/*
El movimiento se detiene al pasar el mouse,
pero las imágenes nunca aumentan de tamaño.
*/
.hb-themes-slider:hover .hb-themes-slider-track {
animation-play-state: paused;
}
.hb-theme-card {
position: relative;
flex: 0 0 clamp(230px, 20vw, 310px);
aspect-ratio: 4 / 5;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
background: #111111;
box-shadow:
0 23px 48px rgba(0, 0, 0, 0.32);
/*
No se utiliza transform ni scale.
La imagen permanece con el mismo tamaño.
*/
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.hb-theme-card:hover {
border-color: rgba(229, 9, 20, 0.75);
box-shadow:
0 25px 52px rgba(0, 0, 0, 0.4),
0 0 25px rgba(229, 9, 20, 0.15);
}
.hb-theme-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/*
Sin transición de tamaño.
Sin zoom.
Sin scale.
*/
}
.hb-theme-image::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(5, 5, 5, 0.88) 0%,
rgba(5, 5, 5, 0.08) 48%,
rgba(229, 9, 20, 0.09) 100%
);
pointer-events: none;
}
.hb-theme-image::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 17px;
pointer-events: none;
}
.hb-theme-image-01 {
background-image: var(--hb-theme-image-01);
}
.hb-theme-image-02 {
background-image: var(--hb-theme-image-02);
}
.hb-theme-image-03 {
background-image: var(--hb-theme-image-03);
}
.hb-theme-image-04 {
background-image: var(--hb-theme-image-04);
}
.hb-theme-image-05 {
background-image: var(--hb-theme-image-05);
}
.hb-theme-image-06 {
background-image: var(--hb-theme-image-06);
}
.hb-theme-image-07 {
background-image: var(--hb-theme-image-07);
}
.hb-theme-image-08 {
background-image: var(--hb-theme-image-08);
}
.hb-theme-card-number {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
display: grid;
place-items: center;
width: 43px;
height: 43px;
border: 1px solid rgba(255, 255, 255, 0.23);
border-radius: 13px;
background: rgba(7, 7, 7, 0.75);
color: var(--hb-themes-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 19px;
font-weight: 900;
backdrop-filter: blur(12px);
}
.hb-theme-card-label {
position: absolute;
right: 15px;
bottom: 15px;
left: 15px;
z-index: 3;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 13px;
background: rgba(7, 7, 7, 0.75);
color: var(--hb-themes-white);
font-size: 7px;
font-weight: 900;
letter-spacing: 1.5px;
text-align: center;
backdrop-filter: blur(12px);
}
.hb-themes-slider-fade {
position: absolute;
top: 0;
bottom: 0;
z-index: 7;
width: clamp(35px, 7vw, 120px);
pointer-events: none;
}
.hb-themes-slider-fade-left {
left: 0;
background:
linear-gradient(
90deg,
#0a0a0a,
transparent
);
}
.hb-themes-slider-fade-right {
right: 0;
background:
linear-gradient(
-90deg,
#0a0a0a,
transparent
);
}
/* =========================================
TEMÁTICAS
========================================= */
.hb-themes-options {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 15px;
padding: 22px;
border: 1px solid rgba(229, 9, 20, 0.32);
border-radius: 22px;
background:
linear-gradient(
105deg,
rgba(229, 9, 20, 0.11),
rgba(255, 255, 255, 0.035)
);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.23);
backdrop-filter: blur(14px);
}
.hb-themes-options-heading {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 12px;
}
.hb-themes-options-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 49px;
height: 49px;
border-radius: 15px;
background: var(--hb-themes-red);
color: var(--hb-themes-white);
font-size: 18px;
box-shadow:
0 0 18px rgba(229, 9, 20, 0.3);
}
.hb-themes-options-heading div {
display: flex;
flex-direction: column;
}
.hb-themes-options-heading small {
color: #ff858b;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.5px;
}
.hb-themes-options-heading strong {
margin-top: 4px;
color: var(--hb-themes-white);
font-size: 13px;
line-height: 1.35;
}
.hb-themes-tags {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 7px;
}
.hb-themes-tags span {
padding: 8px 11px;
border: 1px solid rgba(229, 9, 20, 0.34);
border-radius: 999px;
background: rgba(229, 9, 20, 0.07);
color: rgba(255, 255, 255, 0.84);
font-size: 8px;
font-weight: 750;
transition:
background 0.25s ease,
border-color 0.25s ease;
}
.hb-themes-tags span:hover {
border-color: var(--hb-themes-red);
background: var(--hb-themes-red);
}
/* =========================================
PERSONAJES
========================================= */
.hb-themes-characters {
display: grid;
grid-template-columns:
minmax(0, 0.92fr)
minmax(0, 1.08fr);
align-items: center;
gap: 30px;
margin-top: 20px;
padding: clamp(24px, 3vw, 35px);
border: 1px solid rgba(229, 9, 20, 0.55);
border-radius: 25px;
background:
radial-gradient(
circle at 15% 50%,
rgba(229, 9, 20, 0.2),
transparent 35%
),
linear-gradient(
120deg,
rgba(229, 9, 20, 0.13),
rgba(255, 255, 255, 0.035)
);
box-shadow:
0 25px 55px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(15px);
}
.hb-themes-characters-content {
display: flex;
align-items: center;
gap: 18px;
}
.hb-themes-characters-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 74px;
height: 85px;
background:
linear-gradient(
145deg,
var(--hb-themes-red),
var(--hb-themes-red-dark)
);
color: var(--hb-themes-white);
font-size: 28px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
filter:
drop-shadow(
0 12px 18px rgba(0, 0, 0, 0.3)
);
}
.hb-themes-characters-copy {
min-width: 0;
}
.hb-themes-characters-copy small {
color: #ff8288;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.6px;
}
.hb-themes-characters-copy h3 {
margin: 5px 0 8px;
color: var(--hb-themes-white);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(28px, 3vw, 42px);
font-weight: 900;
line-height: 1;
}
.hb-themes-characters-copy h3 strong {
color: var(--hb-themes-red);
}
.hb-themes-characters-copy p {
max-width: 560px;
margin: 0;
color: rgba(255, 255, 255, 0.62);
font-size: 11px;
line-height: 1.6;
}
.hb-themes-character-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.hb-theme-character-item {
display: flex;
min-width: 0;
min-height: 92px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
background: rgba(255, 255, 255, 0.045);
text-align: center;
transition:
border-color 0.3s ease,
background 0.3s ease,
transform 0.3s ease;
}
.hb-theme-character-item:hover {
border-color: rgba(229, 9, 20, 0.7);
background: rgba(229, 9, 20, 0.12);
transform: translateY(-5px);
}
.hb-theme-character-item span {
display: grid;
place-items: center;
width: 31px;
height: 31px;
border-radius: 10px;
background: var(--hb-themes-red);
color: var(--hb-themes-white);
font-size: 9px;
font-weight: 900;
}
.hb-theme-character-item strong {
color: rgba(255, 255, 255, 0.88);
font-size: 8px;
line-height: 1.25;
}
/* =========================================
CTA
========================================= */
.hb-themes-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-top: 20px;
padding: 22px;
border: 1px solid rgba(229, 9, 20, 0.42);
border-radius: 23px;
background:
linear-gradient(
110deg,
rgba(229, 9, 20, 0.15),
rgba(255, 255, 255, 0.035)
);
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.27);
backdrop-filter: blur(14px);
}
.hb-themes-cta-copy {
display: flex;
align-items: center;
gap: 15px;
}
.hb-themes-cta-shield {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 57px;
height: 65px;
background:
linear-gradient(
145deg,
var(--hb-themes-red),
var(--hb-themes-red-dark)
);
font-size: 24px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
}
.hb-themes-cta-copy > div {
display: flex;
flex-direction: column;
}
.hb-themes-cta-copy small {
color: #ff8288;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.6px;
}
.hb-themes-cta-copy strong {
max-width: 570px;
margin-top: 4px;
color: var(--hb-themes-white);
font-size: clamp(14px, 1.5vw, 19px);
line-height: 1.35;
}
.hb-themes-cta-copy p {
margin: 5px 0 0;
color: rgba(255, 255, 255, 0.54);
font-size: 9px;
line-height: 1.45;
}
/* Botón WhatsApp */
.hb-themes-whatsapp-button {
position: relative;
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 11px;
min-width: 350px;
min-height: 72px;
padding: 12px 17px;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.45);
border-radius: 18px;
background:
linear-gradient(
180deg,
var(--hb-themes-green-light) 0%,
var(--hb-themes-green) 46%,
var(--hb-themes-green-dark) 100%
);
color: #061105;
text-decoration: none;
box-shadow:
0 0 16px rgba(57, 255, 20, 0.85),
0 0 38px rgba(57, 255, 20, 0.56),
0 18px 42px rgba(57, 255, 20, 0.24);
transition:
transform 0.32s ease,
filter 0.32s ease,
box-shadow 0.32s ease;
}
.hb-themes-whatsapp-button:hover {
transform: translateY(-5px) scale(1.025);
filter: brightness(1.08);
box-shadow:
0 0 24px rgba(57, 255, 20, 1),
0 0 55px rgba(57, 255, 20, 0.8),
0 0 90px rgba(57, 255, 20, 0.45),
0 25px 52px rgba(0, 0, 0, 0.34);
}
.hb-themes-button-energy {
position: absolute;
inset: -4px;
z-index: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.hb-themes-button-energy::before {
content: "";
position: absolute;
top: -65%;
left: -36%;
width: 27%;
height: 230%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.95),
transparent
);
filter: blur(8px);
transform: rotate(20deg);
animation: hbThemesNeonSweep 2.9s linear infinite;
}
.hb-themes-button-energy::after {
content: "";
position: absolute;
inset: 3px;
border: 1px solid rgba(255, 255, 255, 0.48);
border-radius: 14px;
opacity: 0.55;
}
.hb-themes-button-shine {
position: absolute;
top: -85%;
left: -45%;
z-index: 1;
width: 24%;
height: 290%;
background: rgba(255, 255, 255, 0.28);
transform: rotate(22deg);
animation: hbThemesButtonShine 3.7s ease-in-out infinite;
}
.hb-themes-whatsapp-icon {
position: relative;
z-index: 2;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(5, 30, 3, 0.16);
box-shadow:
inset 0 0 8px rgba(255, 255, 255, 0.22);
animation:
hbThemesWhatsappPulse 1.6s ease-in-out infinite;
}
.hb-themes-whatsapp-icon svg {
width: 27px;
height: 27px;
fill: #071306;
}
.hb-themes-button-copy {
position: relative;
z-index: 2;
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
}
.hb-themes-button-copy strong {
color: #061105;
font-size: 10px;
font-weight: 950;
letter-spacing: 0.3px;
}
.hb-themes-button-copy small {
margin-top: 3px;
color: rgba(6, 17, 5, 0.72);
font-size: 8px;
font-weight: 750;
}
.hb-themes-whatsapp-button > b {
position: relative;
z-index: 2;
color: #061105;
font-size: 23px;
transition:
transform 0.3s ease;
}
.hb-themes-whatsapp-button:hover > b {
transform: translateX(5px);
}
/* =========================================
ANIMACIONES
========================================= */
@keyframes hbThemesInfiniteSlider {
from {
transform: translateX(0);
}
to {
transform: translateX(
calc(
-50% - 9px
)
);
}
}
@keyframes hbThemesGlow {
0%,
100% {
opacity: 0.6;
transform: scale(0.94);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
@keyframes hbThemesFloat {
0%,
100% {
translate: 0 0;
}
50% {
translate: 0 -17px;
}
}
@keyframes hbThemesSpark {
0%,
100% {
opacity: 0.3;
transform: scale(0.8) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1.3) rotate(18deg);
}
}
@keyframes hbThemesNeonSweep {
from {
transform: translateX(-120%) rotate(20deg);
}
to {
transform: translateX(650%) rotate(20deg);
}
}
@keyframes hbThemesButtonShine {
0%,
30% {
left: -45%;
}
65%,
100% {
left: 130%;
}
}
@keyframes hbThemesWhatsappPulse {
0%,
100% {
transform: scale(1);
filter:
drop-shadow(
0 0 3px rgba(57, 255, 20, 0.5)
);
}
50% {
transform: scale(1.14);
filter:
drop-shadow(
0 0 8px rgba(255, 255, 255, 0.75)
)
drop-shadow(
0 0 18px rgba(57, 255, 20, 1)
);
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1100px) {
.hb-themes-info {
flex-direction: column;
}
.hb-themes-highlight {
flex-basis: auto;
}
.hb-themes-options {
align-items: flex-start;
flex-direction: column;
}
.hb-themes-tags {
justify-content: flex-start;
}
.hb-themes-characters {
grid-template-columns: 1fr;
}
.hb-themes-cta {
align-items: stretch;
flex-direction: column;
}
.hb-themes-whatsapp-button {
width: 100%;
min-width: 0;
justify-content: center;
}
}
/* =========================================
TABLET VERTICAL
========================================= */
@media (max-width: 850px) {
.hb-themes {
padding: 82px 0;
}
.hb-themes-container {
width: min(100% - 28px, 740px);
}
.hb-themes-info-main {
align-items: flex-start;
}
.hb-themes-character-list {
grid-template-columns: repeat(5, minmax(90px, 1fr));
overflow-x: auto;
padding-bottom: 6px;
scrollbar-width: thin;
}
.hb-theme-character-item {
min-width: 90px;
}
}
/* =========================================
MÓVIL
========================================= */
@media (max-width: 620px) {
.hb-themes {
padding: 70px 0;
}
.hb-themes-container {
width: min(100% - 22px, 520px);
}
.hb-themes-heading {
margin-bottom: 40px;
}
.hb-themes-eyebrow {
padding: 7px 10px;
font-size: 7.5px;
letter-spacing: 1px;
}
.hb-themes-eyebrow span {
width: 22px;
height: 22px;
font-size: 9px;
}
.hb-themes-title {
font-size: clamp(45px, 13vw, 63px);
line-height: 0.9;
letter-spacing: -1px;
}
.hb-themes-title span::after {
bottom: -6px;
height: 5px;
}
.hb-themes-intro {
margin-top: 24px;
font-size: 13px;
line-height: 1.55;
}
.hb-themes-info-main {
gap: 14px;
padding: 17px;
border-radius: 19px;
}
.hb-themes-info-shield {
width: 78px;
height: 91px;
}
.hb-themes-info-shield span {
font-size: 31px;
}
.hb-themes-info-copy > span {
font-size: 6px;
letter-spacing: 1px;
}
.hb-themes-info-copy h3 {
font-size: 25px;
}
.hb-themes-info-copy p {
font-size: 9px;
line-height: 1.5;
}
.hb-themes-highlight {
padding: 17px;
border-radius: 19px;
}
.hb-themes-slider {
padding-top: 10px;
padding-bottom: 30px;
}
.hb-themes-slider-track {
gap: 12px;
padding-left: 12px;
animation-duration: 42s;
}
.hb-theme-card {
flex-basis: min(72vw, 255px);
border-radius: 20px;
}
.hb-theme-image::after {
inset: 8px;
border-radius: 14px;
}
.hb-theme-card-number {
top: 13px;
left: 13px;
width: 38px;
height: 38px;
font-size: 17px;
}
.hb-theme-card-label {
right: 13px;
bottom: 13px;
left: 13px;
padding: 9px 10px;
font-size: 6px;
}
.hb-themes-options {
gap: 16px;
padding: 17px;
border-radius: 19px;
}
.hb-themes-options-icon {
width: 43px;
height: 43px;
}
.hb-themes-options-heading small {
font-size: 6px;
letter-spacing: 1px;
}
.hb-themes-options-heading strong {
font-size: 11px;
}
.hb-themes-tags {
gap: 5px;
}
.hb-themes-tags span {
padding: 7px 9px;
font-size: 7px;
}
.hb-themes-characters {
gap: 22px;
padding: 19px;
border-radius: 20px;
}
.hb-themes-characters-content {
align-items: flex-start;
gap: 13px;
}
.hb-themes-characters-icon {
width: 53px;
height: 61px;
font-size: 20px;
}
.hb-themes-characters-copy small {
font-size: 6px;
letter-spacing: 1px;
}
.hb-themes-characters-copy h3 {
font-size: 27px;
}
.hb-themes-characters-copy p {
font-size: 9px;
line-height: 1.5;
}
.hb-themes-character-list {
grid-template-columns: repeat(5, 92px);
}
.hb-theme-character-item {
min-height: 82px;
}
.hb-themes-cta {
gap: 18px;
padding: 17px;
border-radius: 19px;
}
.hb-themes-cta-copy {
align-items: flex-start;
gap: 12px;
}
.hb-themes-cta-shield {
width: 47px;
height: 54px;
font-size: 19px;
}
.hb-themes-cta-copy small {
font-size: 6px;
letter-spacing: 1px;
}
.hb-themes-cta-copy strong {
font-size: 12px;
}
.hb-themes-cta-copy p {
font-size: 8px;
}
.hb-themes-whatsapp-button {
min-height: 69px;
gap: 9px;
padding: 11px 13px;
text-align: left;
box-shadow:
0 0 12px rgba(57, 255, 20, 0.74),
0 0 26px rgba(57, 255, 20, 0.43),
0 16px 34px rgba(0, 0, 0, 0.24);
}
.hb-themes-whatsapp-icon {
width: 37px;
height: 37px;
}
.hb-themes-whatsapp-icon svg {
width: 24px;
height: 24px;
}
.hb-themes-button-copy strong {
font-size: 9px;
}
.hb-themes-button-copy small {
font-size: 7px;
}
}
/* =========================================
MÓVILES PEQUEÑOS
========================================= */
@media (max-width: 390px) {
.hb-themes-container {
width: calc(100% - 18px);
}
.hb-themes-title {
font-size: clamp(41px, 13vw, 54px);
}
.hb-themes-info-main {
align-items: center;
flex-direction: column;
text-align: center;
}
.hb-themes-info-copy h3 {
font-size: 24px;
}
.hb-theme-card {
flex-basis: min(76vw, 245px);
}
.hb-themes-characters-content {
flex-direction: column;
}
.hb-themes-whatsapp-button {
padding: 10px;
}
.hb-themes-button-copy strong {
font-size: 8px;
}
.hb-themes-whatsapp-button > b {
font-size: 19px;
}
}
/* =========================================
ACCESIBILIDAD
========================================= */
@media (prefers-reduced-motion: reduce) {
.hb-themes-slider-track {
animation-play-state: paused !important;
}
.hb-themes *,
.hb-themes *::before,
.hb-themes *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1468bb1 *//* =========================================
FUENTES
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@700;800;900&family=Montserrat:wght@400;500;600;700;800;900&display=swap');
/* =========================================
CONFIGURACIÓN GENERAL
========================================= */
.hb-faq,
.hb-faq *,
.hb-faq *::before,
.hb-faq *::after {
box-sizing: border-box;
}
.hb-faq {
--hb-faq-red: #ed0712;
--hb-faq-red-light: #ff3741;
--hb-faq-red-dark: #a90009;
--hb-faq-white: #ffffff;
--hb-faq-black: #060606;
--hb-faq-dark: #111111;
--hb-faq-green: #39ff14;
--hb-faq-green-light: #79ff61;
--hb-faq-green-dark: #1fd007;
position: relative;
width: 100%;
overflow: hidden;
isolation: isolate;
padding: clamp(90px, 9vw, 140px) 0;
background:
radial-gradient(
circle at 72% 20%,
rgba(237, 7, 18, 0.15),
transparent 30%
),
linear-gradient(
180deg,
#070707 0%,
#111111 48%,
#060606 100%
);
color: var(--hb-faq-white);
font-family: "Montserrat", sans-serif;
}
.hb-faq-container {
position: relative;
z-index: 5;
width: min(1440px, calc(100% - 48px));
margin: 0 auto;
}
/* =========================================
FONDO
========================================= */
.hb-faq-background {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hb-faq-grid-pattern {
position: absolute;
inset: 0;
opacity: 0.16;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);
background-size: 48px 48px;
mask-image:
linear-gradient(
180deg,
transparent,
black 10%,
black 90%,
transparent
);
}
.hb-faq-glow {
position: absolute;
border-radius: 50%;
filter: blur(40px);
}
.hb-faq-glow-one {
top: 8%;
left: -260px;
width: 560px;
height: 560px;
background:
rgba(237, 7, 18, 0.13);
animation:
hbFaqGlow 8s ease-in-out infinite;
}
.hb-faq-glow-two {
right: -280px;
bottom: 8%;
width: 600px;
height: 600px;
background:
rgba(237, 7, 18, 0.1);
animation:
hbFaqGlow 9s ease-in-out infinite reverse;
}
.hb-faq-ray {
position: absolute;
display: block;
width: 38px;
height: 140px;
background: var(--hb-faq-red);
opacity: 0.11;
clip-path: polygon(
55% 0,
100% 0,
65% 43%,
100% 43%,
20% 100%,
40% 56%,
0 56%
);
filter:
drop-shadow(
0 0 15px rgba(237, 7, 18, 0.75)
);
}
.hb-faq-ray-one {
top: 18%;
right: 2%;
transform: rotate(16deg);
animation:
hbFaqFloat 6s ease-in-out infinite;
}
.hb-faq-ray-two {
bottom: 13%;
left: 2%;
width: 26px;
height: 98px;
transform: rotate(-16deg);
animation:
hbFaqFloat 5s ease-in-out infinite reverse;
}
.hb-faq-spark {
position: absolute;
color: var(--hb-faq-red);
filter:
drop-shadow(
0 0 12px rgba(237, 7, 18, 0.8)
);
animation:
hbFaqSpark 2.8s ease-in-out infinite;
}
.hb-faq-spark-one {
top: 8%;
left: 12%;
font-size: 26px;
}
.hb-faq-spark-two {
top: 44%;
right: 5%;
font-size: 34px;
animation-delay: 0.8s;
}
.hb-faq-spark-three {
bottom: 8%;
left: 43%;
font-size: 20px;
animation-delay: 1.3s;
}
.hb-faq-background-shield {
position: absolute;
right: 4%;
bottom: -65px;
display: grid;
place-items: center;
width: 190px;
height: 220px;
border:
2px solid rgba(237, 7, 18, 0.13);
background:
rgba(237, 7, 18, 0.035);
color:
rgba(237, 7, 18, 0.15);
font-family:
"Barlow Condensed",
sans-serif;
font-size: 90px;
font-weight: 900;
clip-path: polygon(
50% 0,
93% 17%,
87% 70%,
50% 100%,
13% 70%,
7% 17%
);
transform: rotate(9deg);
}
/* =========================================
ENCABEZADO
========================================= */
.hb-faq-heading {
max-width: 900px;
margin:
0 auto
clamp(48px, 5vw, 70px);
text-align: center;
}
.hb-faq-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
padding: 9px 14px;
border:
1px solid rgba(237, 7, 18, 0.5);
border-radius: 999px;
background:
rgba(237, 7, 18, 0.08);
color:
rgba(255, 255, 255, 0.88);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.8px;
backdrop-filter: blur(12px);
}
.hb-faq-eyebrow span {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--hb-faq-red);
color: var(--hb-faq-white);
font-size: 11px;
box-shadow:
0 0 15px rgba(237, 7, 18, 0.45);
}
.hb-faq-title {
margin: 0;
color: var(--hb-faq-white);
font-family:
"Archivo Black",
sans-serif;
font-size:
clamp(52px, 6.2vw, 90px);
font-weight: 900;
line-height: 0.9;
letter-spacing: -3px;
text-transform: uppercase;
}
.hb-faq-title span {
position: relative;
display: inline-block;
color: var(--hb-faq-red);
}
.hb-faq-title span::after {
content: "";
position: absolute;
right: 0;
bottom: -9px;
left: 0;
height: 7px;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--hb-faq-red),
var(--hb-faq-red-light),
var(--hb-faq-red)
);
box-shadow:
0 0 20px rgba(237, 7, 18, 0.55);
transform: skewX(-17deg);
}
.hb-faq-intro {
max-width: 720px;
margin: 28px auto 0;
color:
rgba(255, 255, 255, 0.65);
font-size:
clamp(14px, 1.35vw, 18px);
font-weight: 500;
line-height: 1.65;
}
/* =========================================
GRID PRINCIPAL
========================================= */
.hb-faq-main-grid {
display: grid;
grid-template-columns:
minmax(0, 1.12fr)
minmax(360px, 0.72fr);
align-items: start;
gap: clamp(28px, 4vw, 55px);
}
.hb-faq-content {
min-width: 0;
}
/* =========================================
CABECERA PREGUNTAS
========================================= */
.hb-faq-content-heading {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 18px;
padding: 18px 20px;
border:
1px solid rgba(237, 7, 18, 0.4);
border-radius: 20px;
background:
linear-gradient(
105deg,
rgba(237, 7, 18, 0.14),
rgba(255, 255, 255, 0.035)
);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.23);
backdrop-filter: blur(14px);
}
.hb-faq-content-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 51px;
height: 58px;
background:
linear-gradient(
145deg,
var(--hb-faq-red-light),
var(--hb-faq-red-dark)
);
color: var(--hb-faq-white);
font-family:
"Archivo Black",
sans-serif;
font-size: 20px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
}
.hb-faq-content-heading > div {
display: flex;
flex-direction: column;
}
.hb-faq-content-heading small {
color: #ff858b;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.6px;
}
.hb-faq-content-heading strong {
margin-top: 4px;
color: var(--hb-faq-white);
font-size: 14px;
line-height: 1.35;
}
/* =========================================
ACORDEÓN
========================================= */
.hb-faq-list {
display: flex;
flex-direction: column;
gap: 11px;
}
.hb-faq-item {
position: relative;
overflow: hidden;
border:
1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.065),
rgba(255, 255, 255, 0.022)
);
box-shadow:
0 16px 35px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(14px);
transition:
border-color 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.hb-faq-item[open] {
border-color:
rgba(237, 7, 18, 0.65);
background:
linear-gradient(
135deg,
rgba(237, 7, 18, 0.13),
rgba(255, 255, 255, 0.035)
);
box-shadow:
0 20px 42px rgba(0, 0, 0, 0.27),
0 0 25px rgba(237, 7, 18, 0.08);
}
.hb-faq-item summary {
display: grid;
grid-template-columns:
auto
minmax(0, 1fr)
auto;
align-items: center;
gap: 13px;
min-height: 72px;
padding: 14px 17px;
cursor: pointer;
list-style: none;
}
.hb-faq-item summary::-webkit-details-marker {
display: none;
}
.hb-faq-item-number {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border:
1px solid rgba(237, 7, 18, 0.44);
border-radius: 12px;
background:
rgba(237, 7, 18, 0.11);
color: var(--hb-faq-white);
font-family:
"Barlow Condensed",
sans-serif;
font-size: 15px;
font-weight: 900;
}
.hb-faq-item[open]
.hb-faq-item-number {
background:
var(--hb-faq-red);
box-shadow:
0 0 16px rgba(237, 7, 18, 0.35);
}
.hb-faq-question {
min-width: 0;
color:
rgba(255, 255, 255, 0.9);
font-size: 12px;
font-weight: 800;
line-height: 1.4;
}
.hb-faq-toggle {
position: relative;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border:
1px solid rgba(255, 255, 255, 0.13);
border-radius: 10px;
background:
rgba(255, 255, 255, 0.055);
}
.hb-faq-toggle::before,
.hb-faq-toggle::after {
content: "";
position: absolute;
width: 13px;
height: 2px;
border-radius: 99px;
background:
var(--hb-faq-white);
transition:
transform 0.3s ease;
}
.hb-faq-toggle::after {
transform: rotate(90deg);
}
.hb-faq-item[open]
.hb-faq-toggle {
border-color:
rgba(237, 7, 18, 0.65);
background:
var(--hb-faq-red);
}
.hb-faq-item[open]
.hb-faq-toggle::after {
transform: rotate(0deg);
}
.hb-faq-answer {
padding:
0 68px
20px;
color:
rgba(255, 255, 255, 0.63);
animation:
hbFaqAnswerIn 0.35s ease both;
}
.hb-faq-answer p {
margin: 0;
font-size: 10.5px;
font-weight: 500;
line-height: 1.65;
}
.hb-faq-answer p + p {
margin-top: 9px;
}
.hb-faq-answer strong {
color:
var(--hb-faq-white);
font-weight: 900;
}
.hb-faq-answer a {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 11px;
color:
var(--hb-faq-white);
font-size: 9px;
font-weight: 900;
text-decoration: none;
}
.hb-faq-answer a span {
color:
var(--hb-faq-red);
font-size: 17px;
transition:
transform 0.3s ease;
}
.hb-faq-answer a:hover span {
transform: translateX(4px);
}
/* =========================================
AYUDA ADICIONAL
========================================= */
.hb-faq-help {
display: flex;
align-items: center;
gap: 15px;
margin-top: 15px;
padding: 19px;
border:
1px solid rgba(237, 7, 18, 0.4);
border-radius: 20px;
background:
linear-gradient(
110deg,
rgba(237, 7, 18, 0.14),
rgba(255, 255, 255, 0.03)
);
backdrop-filter: blur(14px);
}
.hb-faq-help-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 52px;
height: 60px;
background:
linear-gradient(
145deg,
var(--hb-faq-red),
var(--hb-faq-red-dark)
);
font-size: 22px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
}
.hb-faq-help-copy {
display: flex;
min-width: 0;
flex-direction: column;
}
.hb-faq-help-copy small {
color: #ff8389;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.5px;
}
.hb-faq-help-copy strong {
margin-top: 3px;
color:
var(--hb-faq-white);
font-size: 13px;
line-height: 1.35;
}
.hb-faq-help-copy p {
max-width: 650px;
margin: 5px 0 0;
color:
rgba(255, 255, 255, 0.55);
font-size: 9px;
line-height: 1.5;
}
/* =========================================
COLUMNA DE VIDEO
========================================= */
.hb-faq-video-column {
position: sticky;
top: 25px;
min-width: 0;
}
.hb-faq-video-frame {
overflow: hidden;
border:
1px solid rgba(237, 7, 18, 0.65);
border-radius: 28px;
background:
rgba(7, 7, 7, 0.92);
box-shadow:
0 30px 65px rgba(0, 0, 0, 0.4),
0 0 0 5px rgba(237, 7, 18, 0.07),
0 0 35px rgba(237, 7, 18, 0.12);
backdrop-filter: blur(16px);
}
.hb-faq-video-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 58px;
padding: 12px 15px;
border-bottom:
1px solid rgba(255, 255, 255, 0.09);
}
.hb-faq-video-live {
display: inline-flex;
align-items: center;
gap: 8px;
color:
rgba(255, 255, 255, 0.82);
font-size: 7px;
font-weight: 900;
letter-spacing: 1.4px;
}
.hb-faq-video-live b {
width: 8px;
height: 8px;
border-radius: 50%;
background:
var(--hb-faq-red);
box-shadow:
0 0 12px rgba(237, 7, 18, 0.9);
animation:
hbFaqRecording 1.5s ease-in-out infinite;
}
.hb-faq-video-duration {
padding: 6px 9px;
border:
1px solid rgba(255, 255, 255, 0.11);
border-radius: 999px;
background:
rgba(255, 255, 255, 0.055);
color:
rgba(255, 255, 255, 0.67);
font-size: 6px;
font-weight: 900;
letter-spacing: 1px;
}
.hb-faq-video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 9 / 15;
overflow: hidden;
background-image:
var(--hb-faq-video-poster);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hb-faq-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background: #080808;
}
.hb-faq-video-overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.1),
transparent 45%,
rgba(0, 0, 0, 0.9)
),
linear-gradient(
135deg,
rgba(237, 7, 18, 0.12),
transparent 45%
);
pointer-events: none;
}
.hb-faq-video-copy {
position: absolute;
right: 20px;
bottom: 21px;
left: 20px;
z-index: 3;
display: flex;
flex-direction: column;
}
.hb-faq-video-copy span {
color: #ff8187;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.5px;
}
.hb-faq-video-copy strong {
max-width: 340px;
margin-top: 5px;
color:
var(--hb-faq-white);
font-family:
"Barlow Condensed",
sans-serif;
font-size:
clamp(24px, 2.8vw, 36px);
font-weight: 900;
line-height: 1;
}
.hb-faq-video-bottom {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 13px;
}
.hb-faq-video-feature {
display: flex;
min-width: 0;
min-height: 72px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px;
border:
1px solid rgba(255, 255, 255, 0.09);
border-radius: 13px;
background:
rgba(255, 255, 255, 0.04);
text-align: center;
}
.hb-faq-video-feature span {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background:
var(--hb-faq-red);
color:
var(--hb-faq-white);
font-size: 10px;
font-weight: 900;
}
.hb-faq-video-feature p {
margin: 0;
color:
rgba(255, 255, 255, 0.72);
font-size: 6.5px;
font-weight: 700;
line-height: 1.3;
}
/* =========================================
INFORMACIÓN RÁPIDA
========================================= */
.hb-faq-quick-info {
margin-top: 15px;
padding: 18px;
border:
1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.065),
rgba(237, 7, 18, 0.075)
);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.23);
backdrop-filter: blur(14px);
}
.hb-faq-quick-info-heading {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.hb-faq-quick-info-heading > span {
display: grid;
place-items: center;
width: 37px;
height: 37px;
border-radius: 11px;
background:
var(--hb-faq-red);
color:
var(--hb-faq-white);
font-size: 14px;
}
.hb-faq-quick-info-heading > div {
display: flex;
flex-direction: column;
}
.hb-faq-quick-info-heading small {
color: #ff8187;
font-size: 6px;
font-weight: 900;
letter-spacing: 1.3px;
}
.hb-faq-quick-info-heading strong {
margin-top: 3px;
color:
var(--hb-faq-white);
font-size: 11px;
}
.hb-faq-quick-info ul {
display: flex;
flex-direction: column;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
.hb-faq-quick-info li {
display: flex;
align-items: center;
gap: 9px;
color:
rgba(255, 255, 255, 0.7);
font-size: 8.5px;
font-weight: 700;
line-height: 1.4;
}
.hb-faq-quick-info li span {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 27px;
height: 27px;
border:
1px solid rgba(237, 7, 18, 0.4);
border-radius: 9px;
background:
rgba(237, 7, 18, 0.1);
color:
var(--hb-faq-white);
font-size: 8px;
font-weight: 900;
}
/* =========================================
BOTÓN WHATSAPP
========================================= */
.hb-faq-whatsapp-button {
position: relative;
display: flex;
align-items: center;
gap: 11px;
width: 100%;
min-height: 74px;
margin-top: 15px;
padding: 12px 15px;
overflow: hidden;
border:
2px solid rgba(255, 255, 255, 0.46);
border-radius: 18px;
background:
linear-gradient(
180deg,
var(--hb-faq-green-light),
var(--hb-faq-green) 46%,
var(--hb-faq-green-dark)
);
color: #061105;
text-decoration: none;
box-shadow:
0 0 16px rgba(57, 255, 20, 0.84),
0 0 37px rgba(57, 255, 20, 0.53),
0 18px 42px rgba(57, 255, 20, 0.22);
transition:
transform 0.32s ease,
filter 0.32s ease,
box-shadow 0.32s ease;
}
.hb-faq-whatsapp-button:hover {
transform:
translateY(-5px)
scale(1.02);
filter: brightness(1.08);
box-shadow:
0 0 24px rgba(57, 255, 20, 1),
0 0 55px rgba(57, 255, 20, 0.8),
0 0 88px rgba(57, 255, 20, 0.42);
}
.hb-faq-button-border {
position: absolute;
inset: 3px;
z-index: 0;
border:
1px solid rgba(255, 255, 255, 0.48);
border-radius: 14px;
opacity: 0.55;
}
.hb-faq-button-shine {
position: absolute;
top: -85%;
left: -45%;
z-index: 1;
width: 24%;
height: 290%;
background:
rgba(255, 255, 255, 0.3);
transform: rotate(22deg);
animation:
hbFaqButtonShine 3.7s ease-in-out infinite;
}
.hb-faq-whatsapp-icon {
position: relative;
z-index: 2;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background:
rgba(5, 30, 3, 0.16);
animation:
hbFaqWhatsappPulse 1.6s ease-in-out infinite;
}
.hb-faq-whatsapp-icon svg {
width: 27px;
height: 27px;
fill: #071306;
}
.hb-faq-button-copy {
position: relative;
z-index: 2;
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
}
.hb-faq-button-copy strong {
color: #061105;
font-size: 10px;
font-weight: 950;
}
.hb-faq-button-copy small {
margin-top: 3px;
color:
rgba(6, 17, 5, 0.72);
font-size: 8px;
font-weight: 750;
}
.hb-faq-whatsapp-button > b {
position: relative;
z-index: 2;
color: #061105;
font-size: 23px;
transition:
transform 0.3s ease;
}
.hb-faq-whatsapp-button:hover > b {
transform: translateX(5px);
}
/* =========================================
ANIMACIONES
========================================= */
@keyframes hbFaqGlow {
0%,
100% {
opacity: 0.6;
transform: scale(0.94);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
@keyframes hbFaqFloat {
0%,
100% {
translate: 0 0;
}
50% {
translate: 0 -17px;
}
}
@keyframes hbFaqSpark {
0%,
100% {
opacity: 0.3;
transform:
scale(0.8)
rotate(0deg);
}
50% {
opacity: 1;
transform:
scale(1.3)
rotate(18deg);
}
}
@keyframes hbFaqAnswerIn {
from {
opacity: 0;
transform: translateY(-7px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hbFaqRecording {
0%,
100% {
opacity: 0.35;
transform: scale(0.85);
}
50% {
opacity: 1;
transform: scale(1.18);
}
}
@keyframes hbFaqButtonShine {
0%,
30% {
left: -45%;
}
65%,
100% {
left: 130%;
}
}
@keyframes hbFaqWhatsappPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.13);
}
}
/* =========================================
PORTÁTILES CON POCA ALTURA
========================================= */
@media (max-height: 850px) and (min-width: 851px) {
.hb-faq-video-column {
position: relative;
top: auto;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1050px) {
.hb-faq-main-grid {
grid-template-columns:
minmax(0, 1fr)
minmax(320px, 0.65fr);
gap: 27px;
}
.hb-faq-answer {
padding-right: 35px;
}
}
/* =========================================
TABLET VERTICAL
========================================= */
@media (max-width: 850px) {
.hb-faq {
padding: 82px 0;
}
.hb-faq-container {
width:
min(100% - 28px, 740px);
}
.hb-faq-main-grid {
grid-template-columns: 1fr;
}
.hb-faq-video-column {
position: relative;
top: auto;
width: min(100%, 480px);
margin: 15px auto 0;
}
.hb-faq-video-wrapper {
aspect-ratio: 9 / 14;
}
}
/* =========================================
MÓVIL
========================================= */
@media (max-width: 620px) {
.hb-faq {
padding: 70px 0;
}
.hb-faq-container {
width:
min(100% - 22px, 520px);
}
.hb-faq-heading {
margin-bottom: 40px;
}
.hb-faq-eyebrow {
max-width: 100%;
padding: 7px 10px;
font-size: 7.5px;
letter-spacing: 1px;
}
.hb-faq-eyebrow span {
width: 22px;
height: 22px;
font-size: 9px;
}
.hb-faq-title {
font-size:
clamp(43px, 13vw, 61px);
line-height: 0.92;
letter-spacing: -2px;
}
.hb-faq-title span {
display: block;
}
.hb-faq-title span::after {
bottom: -6px;
height: 5px;
}
.hb-faq-intro {
margin-top: 24px;
font-size: 13px;
line-height: 1.55;
}
.hb-faq-content-heading {
padding: 16px;
border-radius: 18px;
}
.hb-faq-content-icon {
width: 45px;
height: 52px;
font-size: 18px;
}
.hb-faq-content-heading small {
font-size: 6px;
letter-spacing: 1px;
}
.hb-faq-content-heading strong {
font-size: 11px;
}
.hb-faq-item {
border-radius: 16px;
}
.hb-faq-item summary {
grid-template-columns:
auto
minmax(0, 1fr)
auto;
gap: 10px;
min-height: 68px;
padding: 12px;
}
.hb-faq-item-number {
width: 34px;
height: 34px;
font-size: 13px;
}
.hb-faq-question {
min-width: 0;
font-size: 10px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.hb-faq-toggle {
width: 29px;
height: 29px;
}
.hb-faq-answer {
padding:
0 14px
17px
56px;
}
.hb-faq-answer p {
font-size: 9px;
line-height: 1.55;
}
.hb-faq-answer a {
font-size: 8px;
}
.hb-faq-help {
align-items: flex-start;
padding: 16px;
border-radius: 18px;
}
.hb-faq-help-icon {
width: 46px;
height: 53px;
font-size: 19px;
}
.hb-faq-help-copy small {
font-size: 6px;
letter-spacing: 1px;
}
.hb-faq-help-copy strong {
font-size: 11px;
}
.hb-faq-help-copy p {
font-size: 8px;
}
.hb-faq-video-column {
width: 100%;
}
.hb-faq-video-frame {
border-radius: 22px;
}
.hb-faq-video-wrapper {
aspect-ratio: 9 / 14;
}
.hb-faq-video-copy {
right: 16px;
bottom: 17px;
left: 16px;
}
.hb-faq-video-copy strong {
font-size: 28px;
}
.hb-faq-video-feature {
min-height: 66px;
}
.hb-faq-video-feature p {
font-size: 6px;
}
.hb-faq-quick-info {
padding: 16px;
border-radius: 18px;
}
.hb-faq-quick-info li {
align-items: flex-start;
font-size: 8.5px;
}
.hb-faq-quick-info li span {
margin-top: 1px;
}
.hb-faq-whatsapp-button {
min-height: 70px;
padding: 11px 13px;
}
.hb-faq-whatsapp-icon {
width: 37px;
height: 37px;
}
.hb-faq-whatsapp-icon svg {
width: 24px;
height: 24px;
}
.hb-faq-button-copy strong {
font-size: 9px;
}
.hb-faq-button-copy small {
font-size: 7px;
}
}
/* =========================================
CELULARES PEQUEÑOS
========================================= */
@media (max-width: 390px) {
.hb-faq-container {
width:
calc(100% - 18px);
}
.hb-faq-title {
font-size:
clamp(39px, 12.5vw, 52px);
}
.hb-faq-item summary {
grid-template-columns:
32px
minmax(0, 1fr)
27px;
gap: 8px;
}
.hb-faq-item-number {
width: 32px;
height: 32px;
}
.hb-faq-toggle {
width: 27px;
height: 27px;
}
.hb-faq-answer {
padding-left: 52px;
}
.hb-faq-video-bottom {
gap: 4px;
padding: 10px;
}
.hb-faq-video-feature {
padding: 6px;
}
}
/* =========================================
ACCESIBILIDAD
========================================= */
@media (prefers-reduced-motion: reduce) {
.hb-faq *,
.hb-faq *::before,
.hb-faq *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4ad048c *//* =========================================
SECCIÓN 5 | CIERRE FINAL
========================================= */
.hb-final,
.hb-final *,
.hb-final *::before,
.hb-final *::after {
box-sizing: border-box;
}
.hb-final {
--hb-final-red: #e50914;
--hb-final-red-light: #ff3641;
--hb-final-red-dark: #a90009;
--hb-final-red-deep: #650006;
--hb-final-white: #ffffff;
--hb-final-black: #050505;
--hb-final-dark: #101010;
--hb-final-green: #39ff14;
--hb-final-green-light: #79ff61;
--hb-final-green-dark: #1fd007;
position: relative;
width: 100%;
overflow: hidden;
isolation: isolate;
padding:
clamp(95px, 10vw, 155px)
0
0;
background:
radial-gradient(
circle at 50% 18%,
rgba(229, 9, 20, 0.17),
transparent 33%
),
linear-gradient(
180deg,
#080808 0%,
#101010 48%,
#040404 100%
);
color: var(--hb-final-white);
font-family: "Montserrat", sans-serif;
}
.hb-final-container {
position: relative;
z-index: 5;
width: min(1440px, calc(100% - 48px));
margin: 0 auto;
}
/* =========================================
FONDO
========================================= */
.hb-final-background {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hb-final-grid-pattern {
position: absolute;
inset: 0;
opacity: 0.17;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);
background-size: 48px 48px;
mask-image:
linear-gradient(
180deg,
transparent,
black 10%,
black 85%,
transparent
);
}
.hb-final-glow {
position: absolute;
border-radius: 50%;
filter: blur(40px);
}
.hb-final-glow-one {
top: 3%;
left: 50%;
width: 850px;
height: 520px;
background: rgba(229, 9, 20, 0.2);
transform: translateX(-50%);
animation: hbFinalGlowMain 6s ease-in-out infinite;
}
.hb-final-glow-two {
right: -260px;
bottom: 12%;
width: 570px;
height: 570px;
background: rgba(229, 9, 20, 0.09);
animation: hbFinalGlow 9s ease-in-out infinite;
}
.hb-final-lightning {
position: absolute;
display: block;
background: var(--hb-final-red);
clip-path: polygon(
55% 0,
100% 0,
65% 43%,
100% 43%,
20% 100%,
40% 56%,
0 56%
);
filter:
drop-shadow(
0 0 16px rgba(229, 9, 20, 0.9)
);
}
.hb-final-lightning-one {
top: 12%;
left: 5%;
width: 38px;
height: 135px;
opacity: 0.2;
transform: rotate(-17deg);
animation: hbFinalLightningFloat 5s ease-in-out infinite;
}
.hb-final-lightning-two {
top: 15%;
right: 5%;
width: 48px;
height: 170px;
opacity: 0.24;
transform: rotate(17deg);
animation: hbFinalLightningFloat 6s ease-in-out infinite reverse;
}
.hb-final-lightning-three {
top: 43%;
left: 49%;
width: 22px;
height: 80px;
opacity: 0.09;
transform: rotate(9deg);
animation: hbFinalLightningFlash 3.5s ease-in-out infinite;
}
.hb-final-spark {
position: absolute;
color: var(--hb-final-red);
filter:
drop-shadow(
0 0 13px rgba(229, 9, 20, 0.85)
);
animation: hbFinalSpark 2.7s ease-in-out infinite;
}
.hb-final-spark-one {
top: 8%;
left: 18%;
font-size: 25px;
}
.hb-final-spark-two {
top: 18%;
right: 18%;
font-size: 35px;
animation-delay: 0.6s;
}
.hb-final-spark-three {
top: 39%;
left: 8%;
font-size: 18px;
animation-delay: 1.1s;
}
.hb-final-spark-four {
top: 42%;
right: 8%;
font-size: 22px;
animation-delay: 1.5s;
}
.hb-final-background-shield {
position: absolute;
top: 3%;
left: 50%;
display: grid;
place-items: center;
width: min(56vw, 710px);
height: min(64vw, 810px);
border: 3px solid rgba(229, 9, 20, 0.07);
background: rgba(229, 9, 20, 0.025);
color: rgba(229, 9, 20, 0.055);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(140px, 18vw, 260px);
font-weight: 900;
clip-path: polygon(
50% 0,
93% 17%,
87% 70%,
50% 100%,
13% 70%,
7% 17%
);
transform: translateX(-50%);
animation: hbFinalShieldPulse 7s ease-in-out infinite;
}
/* =========================================
CIERRE PRINCIPAL
========================================= */
.hb-final-hero {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
max-width: 1120px;
margin: 0 auto;
text-align: center;
}
.hb-final-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 22px;
padding: 9px 14px;
border: 1px solid rgba(229, 9, 20, 0.5);
border-radius: 999px;
background: rgba(229, 9, 20, 0.08);
color: rgba(255, 255, 255, 0.9);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.8px;
backdrop-filter: blur(12px);
}
.hb-final-eyebrow span {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--hb-final-red);
color: var(--hb-final-white);
font-size: 11px;
box-shadow:
0 0 16px rgba(229, 9, 20, 0.5);
}
.hb-final-title {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
color: var(--hb-final-white);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(60px, 8.3vw, 125px);
font-weight: 900;
line-height: 0.78;
letter-spacing: -3px;
text-transform: uppercase;
text-shadow:
0 13px 35px rgba(0, 0, 0, 0.66);
}
.hb-final-title-line {
display: block;
}
/* =========================================
PALABRA PODERES
========================================= */
.hb-final-power-word {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 12px;
padding: 0 20px 10px;
isolation: isolate;
}
.hb-final-power-word::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -2;
width: 115%;
height: 120%;
border-radius: 50%;
background:
radial-gradient(
ellipse,
rgba(229, 9, 20, 0.44),
rgba(229, 9, 20, 0.11) 50%,
transparent 73%
);
filter: blur(8px);
transform: translate(-50%, -50%);
animation: hbFinalPowerGlow 2.3s ease-in-out infinite;
}
.hb-final-power-word::after {
content: "";
position: absolute;
right: 2%;
bottom: -4px;
left: 2%;
height: 9px;
border-radius: 999px;
background:
linear-gradient(
90deg,
transparent,
var(--hb-final-red),
var(--hb-final-red-light),
var(--hb-final-red),
transparent
);
box-shadow:
0 0 14px rgba(229, 9, 20, 1),
0 0 32px rgba(229, 9, 20, 0.75);
animation: hbFinalPowerLine 1.8s ease-in-out infinite;
}
.hb-final-power-word strong {
position: relative;
z-index: 3;
display: inline-block;
color: var(--hb-final-red);
font-weight: 900;
text-shadow:
0 0 8px rgba(229, 9, 20, 0.45),
0 0 20px rgba(229, 9, 20, 0.35),
0 12px 30px rgba(0, 0, 0, 0.55);
animation: hbFinalPowerText 3s ease-in-out infinite;
}
/* Líneas eléctricas */
.hb-final-electric-line {
position: absolute;
z-index: 2;
display: block;
height: 3px;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.95),
var(--hb-final-red-light),
transparent
);
box-shadow:
0 0 8px rgba(255, 255, 255, 0.85),
0 0 17px rgba(229, 9, 20, 0.9);
clip-path: polygon(
0 50%,
15% 25%,
30% 65%,
47% 15%,
63% 75%,
82% 30%,
100% 50%,
82% 62%,
62% 38%,
48% 82%,
29% 40%,
14% 70%
);
opacity: 0;
}
.hb-final-electric-line-one {
top: 5%;
left: -2%;
width: 36%;
transform: rotate(-8deg);
animation: hbFinalElectricOne 2.7s linear infinite;
}
.hb-final-electric-line-two {
top: 44%;
right: -4%;
width: 33%;
transform: rotate(8deg);
animation: hbFinalElectricTwo 2.2s 0.6s linear infinite;
}
.hb-final-electric-line-three {
bottom: 9%;
left: 28%;
width: 47%;
animation: hbFinalElectricThree 3s 1.1s linear infinite;
}
.hb-final-intro {
max-width: 760px;
margin: 35px auto 27px;
color: rgba(255, 255, 255, 0.7);
font-size: clamp(15px, 1.5vw, 19px);
font-weight: 500;
line-height: 1.65;
}
.hb-final-intro strong {
color: var(--hb-final-white);
font-weight: 900;
}
/* =========================================
PRECIO
========================================= */
.hb-final-price-badge {
display: inline-flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
padding: 15px 21px;
border: 1px solid rgba(229, 9, 20, 0.6);
border-radius: 21px;
background:
linear-gradient(
110deg,
rgba(229, 9, 20, 0.19),
rgba(255, 255, 255, 0.045)
);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.3),
0 0 30px rgba(229, 9, 20, 0.1);
backdrop-filter: blur(15px);
}
.hb-final-price-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 56px;
height: 64px;
background:
linear-gradient(
145deg,
var(--hb-final-red),
var(--hb-final-red-dark)
);
font-size: 24px;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
}
.hb-final-price-copy {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.hb-final-price-copy small {
color: #ff8389;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.7px;
}
.hb-final-price {
display: flex;
align-items: flex-start;
color: var(--hb-final-white);
font-family: "Barlow Condensed", sans-serif;
line-height: 0.95;
}
.hb-final-price span {
margin-top: 7px;
margin-right: 3px;
font-size: 23px;
font-weight: 800;
}
.hb-final-price strong {
font-size: 53px;
font-weight: 900;
letter-spacing: -1px;
}
.hb-final-price-copy b {
color: rgba(255, 255, 255, 0.7);
font-size: 8px;
font-weight: 800;
}
/* =========================================
BOTÓN WHATSAPP
========================================= */
.hb-final-whatsapp-button {
position: relative;
display: flex;
align-items: center;
gap: 13px;
width: min(100%, 470px);
min-height: 82px;
padding: 13px 20px;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.48);
border-radius: 21px;
background:
linear-gradient(
180deg,
var(--hb-final-green-light) 0%,
var(--hb-final-green) 46%,
var(--hb-final-green-dark) 100%
);
color: #061105;
text-align: left;
text-decoration: none;
box-shadow:
0 0 18px rgba(57, 255, 20, 0.88),
0 0 42px rgba(57, 255, 20, 0.6),
0 20px 48px rgba(57, 255, 20, 0.26);
transition:
transform 0.32s ease,
filter 0.32s ease,
box-shadow 0.32s ease;
}
.hb-final-whatsapp-button:hover {
transform: translateY(-6px) scale(1.028);
filter: brightness(1.08);
box-shadow:
0 0 25px rgba(57, 255, 20, 1),
0 0 58px rgba(57, 255, 20, 0.82),
0 0 95px rgba(57, 255, 20, 0.48),
0 27px 58px rgba(0, 0, 0, 0.37);
}
.hb-final-button-energy {
position: absolute;
inset: -4px;
z-index: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.hb-final-button-energy::before {
content: "";
position: absolute;
top: -65%;
left: -38%;
width: 27%;
height: 230%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.96),
transparent
);
filter: blur(8px);
transform: rotate(20deg);
animation: hbFinalNeonSweep 2.8s linear infinite;
}
.hb-final-button-energy::after {
content: "";
position: absolute;
inset: 3px;
border: 1px solid rgba(255, 255, 255, 0.48);
border-radius: 16px;
opacity: 0.55;
}
.hb-final-button-shine {
position: absolute;
top: -85%;
left: -45%;
z-index: 1;
width: 24%;
height: 290%;
background: rgba(255, 255, 255, 0.29);
transform: rotate(22deg);
animation: hbFinalButtonShine 3.7s ease-in-out infinite;
}
.hb-final-whatsapp-icon {
position: relative;
z-index: 2;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(5, 30, 3, 0.16);
box-shadow:
inset 0 0 9px rgba(255, 255, 255, 0.22);
animation: hbFinalWhatsappPulse 1.6s ease-in-out infinite;
}
.hb-final-whatsapp-icon svg {
width: 30px;
height: 30px;
fill: #071306;
}
.hb-final-button-copy {
position: relative;
z-index: 2;
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
}
.hb-final-button-copy strong {
color: #061105;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.35px;
}
.hb-final-button-copy small {
margin-top: 3px;
color: rgba(6, 17, 5, 0.72);
font-size: 9px;
font-weight: 750;
}
.hb-final-whatsapp-button > b {
position: relative;
z-index: 2;
color: #061105;
font-size: 26px;
transition: transform 0.3s ease;
}
.hb-final-whatsapp-button:hover > b {
transform: translateX(6px);
}
.hb-final-availability {
margin-top: 13px;
color: rgba(255, 255, 255, 0.47);
font-size: 8px;
font-weight: 750;
letter-spacing: 0.7px;
}
/* =========================================
INFORMACIÓN
========================================= */
.hb-final-info-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 15px;
margin-top: clamp(65px, 7vw, 95px);
}
.hb-final-info-card {
position: relative;
display: flex;
min-width: 0;
min-height: 280px;
flex-direction: column;
align-items: flex-start;
padding: 23px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 23px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.07),
rgba(255, 255, 255, 0.025)
);
box-shadow:
0 22px 48px rgba(0, 0, 0, 0.27);
backdrop-filter: blur(14px);
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
.hb-final-info-card:hover {
border-color: rgba(229, 9, 20, 0.65);
box-shadow:
0 28px 55px rgba(0, 0, 0, 0.37),
0 0 28px rgba(229, 9, 20, 0.1);
transform: translateY(-7px);
}
.hb-final-contact-card {
border-color: rgba(229, 9, 20, 0.52);
background:
linear-gradient(
145deg,
rgba(229, 9, 20, 0.17),
rgba(255, 255, 255, 0.03)
);
}
.hb-final-info-number {
position: absolute;
top: 15px;
right: 16px;
color: rgba(255, 255, 255, 0.09);
font-family: "Barlow Condensed", sans-serif;
font-size: 52px;
font-weight: 900;
line-height: 1;
}
.hb-final-info-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: 21px;
border-radius: 15px;
background: rgba(229, 9, 20, 0.15);
font-size: 22px;
}
.hb-final-info-card > small {
color: #ff8288;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.6px;
}
.hb-final-info-card h3 {
margin: 5px 0 9px;
color: var(--hb-final-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 29px;
font-weight: 900;
line-height: 1;
}
.hb-final-info-card p {
margin: 0;
color: rgba(255, 255, 255, 0.61);
font-size: 11px;
font-weight: 500;
line-height: 1.65;
}
.hb-final-info-card > a {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 22px;
color: var(--hb-final-white);
font-size: 9px;
font-weight: 900;
text-decoration: none;
}
.hb-final-info-card > a span {
color: var(--hb-final-red);
font-size: 17px;
transition: transform 0.3s ease;
}
.hb-final-info-card > a:hover span {
transform: translateX(4px);
}
.hb-final-info-note {
margin-top: auto;
padding-top: 22px;
color: rgba(255, 255, 255, 0.47);
font-size: 8px;
font-weight: 750;
}
/* =========================================
RECORDATORIO
========================================= */
.hb-final-reminder {
display: flex;
align-items: center;
gap: 18px;
margin-top: 20px;
padding: 22px;
border: 1px solid rgba(229, 9, 20, 0.45);
border-radius: 23px;
background:
linear-gradient(
110deg,
rgba(229, 9, 20, 0.15),
rgba(255, 255, 255, 0.035)
);
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.27);
backdrop-filter: blur(14px);
}
.hb-final-reminder-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 58px;
height: 66px;
background:
linear-gradient(
145deg,
var(--hb-final-red),
var(--hb-final-red-dark)
);
color: var(--hb-final-white);
font-size: 20px;
font-weight: 900;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
}
.hb-final-reminder-copy {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
}
.hb-final-reminder-copy small {
color: #ff8389;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.6px;
}
.hb-final-reminder-copy strong {
max-width: 720px;
margin-top: 4px;
color: var(--hb-final-white);
font-size: clamp(13px, 1.4vw, 17px);
line-height: 1.4;
}
.hb-final-reminder-copy p {
margin: 5px 0 0;
color: rgba(255, 255, 255, 0.52);
font-size: 9px;
line-height: 1.45;
}
.hb-final-reminder-link {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 9px;
min-height: 48px;
padding: 0 17px;
border: 1px solid rgba(229, 9, 20, 0.7);
border-radius: 14px;
background: rgba(229, 9, 20, 0.1);
color: var(--hb-final-white);
font-size: 9px;
font-weight: 900;
text-decoration: none;
transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.hb-final-reminder-link:hover {
background: var(--hb-final-red);
box-shadow:
0 0 22px rgba(229, 9, 20, 0.3);
transform: translateY(-3px);
}
.hb-final-reminder-link span {
font-size: 17px;
}
/* =========================================
FOOTER
========================================= */
.hb-final-footer {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto
minmax(0, 1fr);
align-items: center;
gap: 25px;
margin-top: clamp(60px, 7vw, 90px);
padding: 23px 0;
border-top: 1px solid rgba(255, 255, 255, 0.11);
}
.hb-final-footer-brand {
display: flex;
align-items: center;
gap: 10px;
}
.hb-final-footer-shield {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 42px;
height: 48px;
background:
linear-gradient(
145deg,
var(--hb-final-red),
var(--hb-final-red-dark)
);
color: var(--hb-final-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 14px;
font-weight: 900;
clip-path: polygon(
50% 0,
93% 16%,
87% 70%,
50% 100%,
13% 70%,
7% 16%
);
}
.hb-final-footer-brand div {
display: flex;
flex-direction: column;
}
.hb-final-footer-brand strong {
color: var(--hb-final-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 18px;
font-weight: 900;
line-height: 1;
}
.hb-final-footer-brand small {
margin-top: 3px;
color: rgba(255, 255, 255, 0.48);
font-size: 7px;
font-weight: 750;
letter-spacing: 1.2px;
}
.hb-final-footer > p {
margin: 0;
color: rgba(255, 255, 255, 0.48);
font-size: 9px;
font-weight: 600;
text-align: center;
}
.hb-final-footer-links {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 17px;
}
.hb-final-footer-links a {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(255, 255, 255, 0.63);
font-size: 8px;
font-weight: 800;
text-decoration: none;
transition: color 0.25s ease;
}
.hb-final-footer-links a:hover {
color: var(--hb-final-white);
}
.hb-final-footer-links a span {
display: grid;
place-items: center;
width: 29px;
height: 29px;
border-radius: 50%;
background: var(--hb-final-red);
color: var(--hb-final-white);
font-size: 13px;
animation: hbFinalFooterArrow 1.6s ease-in-out infinite;
}
/* =========================================
ANIMACIONES
========================================= */
@keyframes hbFinalGlowMain {
0%,
100% {
opacity: 0.68;
transform: translateX(-50%) scale(0.94);
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1.08);
}
}
@keyframes hbFinalGlow {
0%,
100% {
opacity: 0.55;
transform: scale(0.94);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
@keyframes hbFinalShieldPulse {
0%,
100% {
opacity: 0.55;
transform: translateX(-50%) scale(0.96);
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1.03);
}
}
@keyframes hbFinalLightningFloat {
0%,
100% {
translate: 0 0;
}
50% {
translate: 0 -18px;
}
}
@keyframes hbFinalLightningFlash {
0%,
88%,
100% {
opacity: 0.04;
}
90% {
opacity: 0.42;
}
92% {
opacity: 0.08;
}
95% {
opacity: 0.35;
}
}
@keyframes hbFinalSpark {
0%,
100% {
opacity: 0.28;
transform: scale(0.8) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1.35) rotate(20deg);
}
}
@keyframes hbFinalPowerGlow {
0%,
100% {
opacity: 0.65;
transform: translate(-50%, -50%) scale(0.92);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.09);
}
}
@keyframes hbFinalPowerLine {
0%,
100% {
opacity: 0.58;
transform: scaleX(0.87);
}
50% {
opacity: 1;
transform: scaleX(1.05);
}
}
@keyframes hbFinalPowerText {
0%,
100% {
filter:
brightness(1)
drop-shadow(
0 0 3px rgba(229, 9, 20, 0.3)
);
}
50% {
filter:
brightness(1.15)
drop-shadow(
0 0 12px rgba(229, 9, 20, 0.75)
);
}
}
@keyframes hbFinalElectricOne {
0%,
70%,
100% {
opacity: 0;
}
72% {
opacity: 1;
transform: rotate(-8deg) scaleX(0.75);
}
76% {
opacity: 0.25;
}
80% {
opacity: 0.95;
transform: rotate(-8deg) scaleX(1.1);
}
84% {
opacity: 0;
}
}
@keyframes hbFinalElectricTwo {
0%,
55%,
100% {
opacity: 0;
}
58% {
opacity: 0.95;
transform: rotate(8deg) scaleX(0.7);
}
64% {
opacity: 0.2;
}
68% {
opacity: 1;
transform: rotate(8deg) scaleX(1.1);
}
72% {
opacity: 0;
}
}
@keyframes hbFinalElectricThree {
0%,
78%,
100% {
opacity: 0;
}
80% {
opacity: 1;
transform: scaleX(0.72);
}
85% {
opacity: 0.2;
}
89% {
opacity: 0.9;
transform: scaleX(1.1);
}
93% {
opacity: 0;
}
}
@keyframes hbFinalNeonSweep {
from {
transform: translateX(-120%) rotate(20deg);
}
to {
transform: translateX(680%) rotate(20deg);
}
}
@keyframes hbFinalButtonShine {
0%,
30% {
left: -45%;
}
65%,
100% {
left: 130%;
}
}
@keyframes hbFinalWhatsappPulse {
0%,
100% {
transform: scale(1);
filter:
drop-shadow(
0 0 3px rgba(57, 255, 20, 0.5)
);
}
50% {
transform: scale(1.14);
filter:
drop-shadow(
0 0 8px rgba(255, 255, 255, 0.75)
)
drop-shadow(
0 0 18px rgba(57, 255, 20, 1)
);
}
}
@keyframes hbFinalFooterArrow {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1100px) {
.hb-final-info-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hb-final-info-card {
min-height: 250px;
}
.hb-final-footer {
grid-template-columns: 1fr auto;
}
.hb-final-footer > p {
display: none;
}
}
/* =========================================
TABLET VERTICAL
========================================= */
@media (max-width: 850px) {
.hb-final {
padding-top: 90px;
}
.hb-final-container {
width: min(100% - 28px, 740px);
}
.hb-final-title {
font-size: clamp(58px, 13vw, 94px);
line-height: 0.81;
letter-spacing: -2px;
}
.hb-final-reminder {
align-items: flex-start;
flex-wrap: wrap;
}
.hb-final-reminder-link {
margin-left: 76px;
}
}
/* =========================================
MÓVIL
========================================= */
@media (max-width: 620px) {
.hb-final {
padding-top: 75px;
}
.hb-final-container {
width: min(100% - 22px, 520px);
}
.hb-final-eyebrow {
padding: 7px 10px;
font-size: 7.5px;
letter-spacing: 1px;
}
.hb-final-eyebrow span {
width: 22px;
height: 22px;
font-size: 9px;
}
.hb-final-title {
font-size: clamp(49px, 15vw, 70px);
line-height: 0.82;
letter-spacing: -1px;
}
.hb-final-power-word {
margin-top: 9px;
padding-right: 8px;
padding-left: 8px;
}
.hb-final-power-word::after {
height: 6px;
}
.hb-final-intro {
margin-top: 29px;
font-size: 13px;
line-height: 1.55;
}
.hb-final-price-badge {
gap: 12px;
padding: 13px 15px;
border-radius: 18px;
}
.hb-final-price-icon {
width: 48px;
height: 55px;
font-size: 20px;
}
.hb-final-price-copy small {
font-size: 6px;
letter-spacing: 1.1px;
}
.hb-final-price strong {
font-size: 44px;
}
.hb-final-price span {
font-size: 20px;
}
.hb-final-whatsapp-button {
min-height: 74px;
gap: 9px;
padding: 11px 13px;
border-radius: 18px;
box-shadow:
0 0 13px rgba(57, 255, 20, 0.74),
0 0 28px rgba(57, 255, 20, 0.44),
0 17px 36px rgba(0, 0, 0, 0.27);
}
.hb-final-whatsapp-icon {
width: 39px;
height: 39px;
}
.hb-final-whatsapp-icon svg {
width: 25px;
height: 25px;
}
.hb-final-button-copy strong {
font-size: 9px;
}
.hb-final-button-copy small {
font-size: 7px;
}
.hb-final-whatsapp-button > b {
font-size: 20px;
}
.hb-final-info-grid {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 55px;
}
.hb-final-info-card {
min-height: 215px;
padding: 19px;
border-radius: 19px;
}
.hb-final-info-icon {
width: 44px;
height: 44px;
margin-bottom: 16px;
font-size: 20px;
}
.hb-final-info-card h3 {
font-size: 26px;
}
.hb-final-reminder {
gap: 13px;
padding: 17px;
border-radius: 19px;
}
.hb-final-reminder-icon {
width: 48px;
height: 55px;
font-size: 17px;
}
.hb-final-reminder-copy small {
font-size: 6px;
letter-spacing: 1px;
}
.hb-final-reminder-copy strong {
font-size: 11px;
}
.hb-final-reminder-copy p {
font-size: 8px;
}
.hb-final-reminder-link {
width: 100%;
margin-left: 0;
justify-content: center;
}
.hb-final-footer {
grid-template-columns: 1fr;
gap: 18px;
margin-top: 55px;
padding: 22px 0;
text-align: center;
}
.hb-final-footer-brand {
justify-content: center;
}
.hb-final-footer-links {
flex-direction: column;
justify-content: center;
gap: 12px;
}
}
/* =========================================
MÓVILES PEQUEÑOS
========================================= */
@media (max-width: 390px) {
.hb-final-container {
width: calc(100% - 18px);
}
.hb-final-title {
font-size: clamp(44px, 15vw, 59px);
}
.hb-final-price-badge {
width: 100%;
justify-content: center;
}
.hb-final-whatsapp-button {
padding: 10px;
}
.hb-final-button-copy strong {
font-size: 8px;
}
}
/* =========================================
ACCESIBILIDAD
========================================= */
@media (prefers-reduced-motion: reduce) {
.hb-final *,
.hb-final *::before,
.hb-final *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}/* End custom CSS */