html,
body {
width: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 0;
}
/* =========================================
RESET
========================================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:
Arial,
Helvetica,
sans-serif;
background:#f5f5f3;
color:#111111;
overflow-x:hidden;
}
img{
display:block;
width:100%;
}
a{
color:inherit;
text-decoration:none;
}
/* =========================================
COLORES
========================================= */
:root{
--black:#111111;
--white:#ffffff;
--red:#F8391F;
--orange:#F99423;
--blue:#253CB3;
--grey:#686868;
--light:#f5f5f3;
}
/* =========================================
NAVBAR
========================================= */
.navbar{
position:absolute;
top:0;
left:0;
z-index:50;
width:100%;
height:88px;
padding:
0 5vw;
display:flex;
align-items:center;
gap:35px;
color:white;
}
.logo-link{
display:block;
}
.logo-img{
width:145px;
height:auto;
}
.nav-links{
display:flex;
gap:30px;
margin-left:auto;
}
.nav-links a{
font-size:11px;
font-weight:700;
letter-spacing:.12em;
}
.nav-cta{
display:flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:
0 22px;
background:white;
color:#111;
font-size:11px;
font-weight:800;
letter-spacing:.1em;
}
.hamburger{
display:none;
border:0;
background:none;
cursor:pointer;
}
/* =========================================
HERO
========================================= */
.hero{
position:relative;
min-height:760px;
display:flex;
align-items:flex-end;
overflow:hidden;
background:#111;
}
.hero-image{
position:absolute;
inset:0;
}
.hero-image img{
width:100%;
height:100%;
object-fit:cover;
}
.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.78) 0%,
rgba(0,0,0,.35) 55%,
rgba(0,0,0,.20) 100%
);
}
.hero-content{
position:relative;
z-index:2;
max-width:900px;
padding:
0 5vw 90px;
color:white;
}
.eyebrow,
.section-label{
font-size:11px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
}
.hero-content h1{
margin-top:24px;
font-size:
clamp(
72px,
10vw,
150px
);
line-height:.82;
letter-spacing:-.065em;
font-weight:900;
}
.hero-content h2{
margin-top:25px;
font-size:
clamp(
28px,
4vw,
54px
);
line-height:.92;
letter-spacing:-.04em;
font-weight:900;
}
.hero-content h2 span{
color:var(--red);
}
.hero-text{
max-width:650px;
margin-top:30px;
font-size:20px;
line-height:1.45;
color:rgba(255,255,255,.86);
}
.hero-buttons{
display:flex;
gap:10px;
margin-top:35px;
}
.button{
min-height:58px;
padding:
0 28px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:800;
letter-spacing:.1em;
}
.button-primary{
background:var(--red);
color:white;
}
.button-outline{
border:1px solid rgba(255,255,255,.7);
color:white;
}
/* =========================================
SECCIONES
========================================= */
.section{
padding:
130px 7vw;
}
.method{
background:var(--light);
}
.method-grid{
display:grid;
grid-template-columns:
1fr 1fr;
gap:8vw;
margin-top:50px;
}
.method-heading h2,
.groups-copy h2,
.for-you-content h2,
.location h2{
font-size:
clamp(
52px,
6vw,
92px
);
line-height:.88;
letter-spacing:-.055em;
font-weight:900;
}
.method-heading h2 span,
.groups-copy h2 span,
.for-you-content h2 span,
.location h2 span{
color:var(--red);
}
.method-copy{
max-width:600px;
}
.lead{
font-size:23px;
line-height:1.4;
font-weight:500;
}
.method-copy > p:not(.lead){
margin-top:20px;
font-size:17px;
line-height:1.65;
color:#555;
}
.method-blocks{
margin-top:55px;
display:grid;
gap:0;
}
.method-item{
padding:
25px 0;
border-top:1px solid #d3d3d0;
}
.method-item span{
color:var(--red);
font-size:10px;
font-weight:800;
letter-spacing:.15em;
}
.method-item h3{
margin-top:9px;
font-size:25px;
}
.method-item p{
margin-top:8px;
max-width:460px;
font-size:15px;
line-height:1.5;
color:#666;
}
/* =========================================
60 MIN
========================================= */
.hour-section{
display:grid;
grid-template-columns:
45% 55%;
min-height:720px;
background:#111;
color:white;
}
.hour-image{
overflow:hidden;
}
.hour-image img{
width:100%;
height:100%;
object-fit:cover;
}
.hour-content{
padding:
9vw 7vw;
display:flex;
flex-direction:column;
justify-content:center;
}
.hour-content .section-label{
color:var(--red);
}
.big-number{
margin-top:25px;
font-size:
clamp(
120px,
17vw,
260px
);
line-height:.75;
font-weight:900;
letter-spacing:-.08em;
}
.hour-content h2{
margin-top:45px;
max-width:650px;
font-size:
clamp(
40px,
5vw,
72px
);
line-height:.9;
letter-spacing:-.05em;
}
.hour-content h2 span{
color:rgba(255,255,255,.3);
}
.hour-content > p{
max-width:480px;
margin-top:25px;
font-size:17px;
line-height:1.5;
color:#bbb;
}
.flow{
margin-top:35px;
display:flex;
align-items:center;
gap:15px;
flex-wrap:wrap;
}
.flow span{
font-size:10px;
font-weight:800;
letter-spacing:.13em;
}
.flow b{
color:var(--red);
}
/* =========================================
GRUPOS
========================================= */
.groups{
background:white;
}
.groups-grid{
display:grid;
grid-template-columns:
45% 55%;
gap:6vw;
margin-top:60px;
align-items:center;
}
.groups-copy{
max-width:600px;
}
.groups-copy .lead{
margin-top:35px;
}
.groups-copy > p:not(.lead){
margin-top:20px;
max-width:500px;
font-size:17px;
line-height:1.6;
color:#555;
}
.groups-images{
display:grid;
grid-template-columns:
1fr 1fr;
gap:12px;
align-items:start;
}
.groups-images img{
height:570px;
object-fit:cover;
}
.groups-images img:nth-child(2){
margin-top:90px;
}
/* =========================================
PARA QUIÉN
========================================= */
.for-you{
display:grid;
grid-template-columns:
45% 55%;
padding:
0;
background:#f5f5f3;
}
.for-you-image{
min-height:750px;
}
.for-you-image img{
width:100%;
height:100%;
object-fit:cover;
}
.for-you-content{
padding:
9vw 7vw;
display:flex;
flex-direction:column;
justify-content:center;
}
.for-you-content .lead{
margin-top:35px;
}
.benefits{
margin-top:40px;
display:grid;
grid-template-columns:
1fr 1fr;
}
.benefits div{
display:flex;
gap:12px;
align-items:center;
padding:
16px 0;
border-top:1px solid #d2d2d0;
}
.benefits span{
color:var(--red);
font-weight:900;
}
.benefits p{
font-size:14px;
font-weight:600;
}
/* =========================================
GALERÍA
========================================= */
.gallery-section{
padding:
130px 5vw;
background:#111;
color:white;
}
.gallery-header{
max-width:700px;
margin-bottom:65px;
}
.gallery-header .section-label{
color:var(--red);
}
.gallery-header h2{
margin-top:25px;
font-size:
clamp(
65px,
9vw,
130px
);
line-height:.82;
letter-spacing:-.065em;
}
.gallery-header h2 span{
color:var(--red);
}
.gallery{
display:grid;
grid-template-columns:
1fr 1fr;
gap:15px;
align-items:start;
}
.gallery-item{
overflow:hidden;
}
.gallery-tall{
height:700px;
}
.gallery-wide{
grid-column:1 / -1;
height:520px;
}
.gallery-item img{
width:100%;
height:100%;
object-fit:cover;
transition:
transform .7s ease;
}
.gallery-item:hover img{
transform:scale(1.03);
}
/* =========================================
UBICACIÓN
========================================= */
.location{
display:grid;
grid-template-columns:
1fr 1fr;
min-height:650px;
background:white;
}
.location-copy{
padding:
110px 7vw;
display:flex;
flex-direction:column;
justify-content:center;
}
.location h2{
margin-top:25px;
}
.location-address{
margin-top:40px;
font-size:20px;
line-height:1.6;
font-weight:600;
}
.location-copy > p:not(.section-label):not(.location-address){
margin-top:20px;
max-width:450px;
font-size:15px;
line-height:1.5;
color:#666;
}
.text-link{
margin-top:35px;
width:max-content;
padding-bottom:8px;
border-bottom:1px solid #111;
font-size:11px;
font-weight:800;
letter-spacing:.1em;
}
.location-map iframe{
width:100%;
height:100%;
min-height:650px;
border:0;
filter:grayscale(1);
}
/* =========================================
CTA
========================================= */
.final-cta{
padding:
150px 7vw;
background:var(--red);
color:white;
}
.final-cta h2{
margin-top:25px;
max-width:1100px;
font-size:
clamp(
65px,
9vw,
145px
);
line-height:.82;
letter-spacing:-.065em;
}
.final-cta h2 span{
color:rgba(255,255,255,.25);
}
.final-cta > p:not(.section-label){
max-width:550px;
margin-top:35px;
font-size:19px;
line-height:1.5;
}
.button-white{
margin-top:35px;
background:white;
color:#111;
}
/* =========================================
FOOTER
========================================= */
.footer{
padding:
30px 5vw;
display:flex;
gap:30px;
align-items:center;
background:#111;
color:white;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
}
.footer a{
margin-left:auto;
}
.footer a + a{
margin-left:0;
}
/* =========================================
WHATSAPP
========================================= */
.whatsapp{
position:fixed;
z-index:100;
right:24px;
bottom:24px;
width:62px;
height:62px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#20d66b;
color:white;
font-size:12px;
font-weight:900;
box-shadow:
0 12px 35px rgba(0,0,0,.22);
}
/* =========================================
RESPONSIVE TABLET
========================================= */
@media (min-width: 601px) and (max-width: 1100px){
.navbar{
padding:0 4vw;
}
.nav-links{
gap:20px;
}
.nav-links a{
font-size:10px;
}
.nav-cta{
padding:0 16px;
}
/* HERO */
.hero{
min-height:680px;
}
.hero-content{
padding:
0 5vw 70px;
max-width:760px;
}
.hero-content h1{
font-size:clamp(70px,10vw,110px);
}
.hero-content h2{
font-size:42px;
}
/* METODOLOGÍA */
.section{
padding:
90px 5vw;
}
.method-grid{
gap:5vw;
}
.method-heading h2,
.groups-copy h2,
.for-you-content h2,
.location h2{
font-size:
clamp(48px,6vw,72px);
}
/* 60 MIN */
.hour-section{
grid-template-columns:45% 55%;
}
.hour-content{
padding:
70px 5vw;
}
.big-number{
font-size:clamp(110px,14vw,180px);
}
.hour-content h2{
font-size:48px;
}
/* GRUPOS */
.groups{
padding:
90px 5vw;
}
.groups-grid{
grid-template-columns:
42% 58%;
gap:4vw;
}
.groups-images{
gap:10px;
}
.groups-images img{
height:500px;
}
.groups-images img:nth-child(2){
margin-top:60px;
}
/* PARA QUIÉN */
.for-you{
grid-template-columns:
45% 55%;
}
.for-you-image{
min-height:620px;
}
.for-you-content{
padding:
80px 5vw;
}
.benefits{
grid-template-columns:
1fr;
}
/* GALERÍA */
.gallery-section{
padding:
90px 5vw;
}
.gallery-tall{
height:580px;
}
.gallery-wide{
height:400px;
}
/* UBICACIÓN */
.location-copy{
padding:
80px 5vw;
}
.location-map iframe{
min-height:600px;
}
/* CTA */
.final-cta{
padding:
100px 5vw;
}
}
/* =========================================
MOBILE — AJUSTE FINAL
========================================= */
@media (max-width: 600px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
}
body {
min-height: 0;
}
/* =====================================
NAV
===================================== */
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 76px;
padding: 0 16px;
display: flex;
align-items: center;
gap: 8px;
}
.logo-img {
width: 125px;
max-width: 125px;
}
.nav-links {
position: absolute;
top: 76px;
left: 0;
right: 0;
display: none;
flex-direction: column;
gap: 20px;
padding: 24px;
background: #111;
}
.nav-links.open {
display: flex;
}
.nav-links a {
font-size: 11px;
}
.nav-cta {
margin-left: auto;
min-height: 46px;
padding: 0 14px;
font-size: 9px;
}
.hamburger {
display: block;
width: 38px;
padding: 0;
border: 0;
background: transparent;
}
.hamburger span {
display: block;
width: 100%;
height: 2px;
margin: 7px 0;
background: white;
}
/* =====================================
HERO
===================================== */
.hero {
width: 100%;
min-height: 0;
display: flex;
flex-direction: column;
background: #111;
overflow: hidden;
}
.hero-image {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-overlay {
background:
linear-gradient(
180deg,
rgba(0,0,0,.05),
rgba(0,0,0,.25)
);
}
.hero-content {
width: 100%;
padding: 38px 22px 48px;
background: #111;
overflow: hidden;
}
.hero-content h1 {
margin-top: 18px;
font-size: 54px;
line-height: .86;
letter-spacing: -.055em;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
}
.hero-content h2 {
margin-top: 20px;
font-size: 27px;
line-height: .93;
letter-spacing: -.035em;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
}
.hero-text {
margin-top: 23px;
max-width: 100%;
font-size: 16px;
line-height: 1.48;
}
.hero-buttons {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 26px;
}
.hero-buttons .button {
width: 100%;
min-height: 56px;
}
/* =====================================
SECCIONES
===================================== */
.section {
width: 100%;
padding: 65px 22px;
}
.section-label {
font-size: 10px;
letter-spacing: .15em;
}
/* =====================================
METODOLOGÍA
===================================== */
.method-grid {
display: block;
margin-top: 30px;
}
.method-heading {
width: 100%;
}
.method-heading h2 {
width: 100%;
max-width: 100%;
font-size: 43px;
line-height: .9;
letter-spacing: -.045em;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
}
.method-copy {
width: 100%;
margin-top: 35px;
}
.lead {
font-size: 19px;
line-height: 1.4;
}
.method-copy > p:not(.lead) {
font-size: 16px;
line-height: 1.55;
}
.method-blocks {
margin-top: 38px;
}
.method-item {
padding: 23px 0;
}
.method-item h3 {
font-size: 23px;
}
.method-item p {
font-size: 15px;
line-height: 1.5;
}
/* =====================================
60 MINUTOS
===================================== */
.hour-section {
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.hour-image {
width: 100%;
height: 430px;
}
.hour-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hour-content {
width: 100%;
padding: 60px 22px 68px;
}
.big-number {
margin-top: 30px;
font-size: 125px;
line-height: .72;
letter-spacing: -.08em;
}
.hour-content h2 {
margin-top: 34px;
font-size: 39px;
line-height: .91;
letter-spacing: -.045em;
max-width: 100%;
}
.hour-content > p {
font-size: 16px;
line-height: 1.5;
}
.flow {
margin-top: 28px;
gap: 8px;
flex-wrap: wrap;
}
.flow span {
font-size: 8px;
letter-spacing: .08em;
}
/* =====================================
GRUPOS CONTROLADOS
===================================== */
.groups {
width: 100%;
padding: 65px 22px 72px;
}
.groups-grid {
width: 100%;
display: flex;
flex-direction: column;
gap: 34px;
margin-top: 34px;
}
.groups-copy {
width: 100%;
}
.groups-copy h2 {
width: 100%;
font-size: 43px;
line-height: .9;
letter-spacing: -.045em;
}
.groups-copy .lead {
margin-top: 28px;
}
.groups-copy > p:not(.lead) {
margin-top: 16px;
font-size: 16px;
line-height: 1.55;
}
.groups-images {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.groups-images img {
width: 100%;
height: 340px;
object-fit: cover;
}
.groups-images img:nth-child(2) {
margin-top: 45px;
}
/* =====================================
PARA QUIÉN
===================================== */
.for-you {
width: 100%;
display: flex;
flex-direction: column;
}
.for-you-image {
width: 100%;
height: 480px;
min-height: 0;
}
.for-you-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.for-you-content {
width: 100%;
padding: 65px 22px 72px;
}
.for-you-content h2 {
font-size: 43px;
line-height: .9;
}
.for-you-content .lead {
margin-top: 28px;
}
.benefits {
width: 100%;
display: grid;
grid-template-columns: 1fr;
margin-top: 30px;
}
.benefits div {
padding: 14px 0;
}
/* =====================================
GALERÍA
===================================== */
.gallery-section {
width: 100%;
padding: 65px 22px;
}
.gallery-header {
width: 100%;
margin-bottom: 35px;
}
.gallery-header h2 {
width: 100%;
margin-top: 20px;
font-size: 58px;
line-height: .84;
letter-spacing: -.055em;
}
.gallery {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.gallery-item {
width: 100%;
overflow: hidden;
}
.gallery-tall {
height: 390px;
}
.gallery-wide {
grid-column: 1 / -1;
height: 240px;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =====================================
UBICACIÓN
===================================== */
.location {
width: 100%;
display: flex;
flex-direction: column;
}
.location-copy {
width: 100%;
padding: 65px 22px 42px;
}
.location h2 {
font-size: 43px;
line-height: .9;
}
.location-address {
margin-top: 28px;
font-size: 18px;
line-height: 1.5;
}
.location-copy > p:not(.section-label):not(.location-address) {
font-size: 15px;
line-height: 1.5;
}
.location-map {
width: 100%;
}
.location-map iframe {
display: block;
width: 100%;
height: 330px;
min-height: 330px;
border: 0;
}
/* =====================================
CTA FINAL
===================================== */
.final-cta {
width: 100%;
padding: 72px 22px 75px;
overflow: hidden;
}
.final-cta h2 {
width: 100%;
max-width: 100%;
margin-top: 20px;
font-size: 48px;
line-height: .87;
letter-spacing: -.05em;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
}
.final-cta > p:not(.section-label) {
margin-top: 28px;
font-size: 16px;
line-height: 1.5;
}
.final-cta .button {
width: 100%;
min-height: 58px;
margin-top: 30px;
}
/* =====================================
FOOTER
===================================== */
.footer {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
margin: 0;
padding: 30px 22px;
background: #111;
min-height: 0;
}
.footer a {
margin-left: 0;
}
.footer a + a {
margin-left: 0;
}
/* =====================================
WHATSAPP
===================================== */
.whatsapp {
width: 58px;
height: 58px;
right: 18px;
bottom: 18px;
font-size: 11px;
}
}