/* ============ BUGGY ROAD THEME VARIABLES ============ */
:root {
–accent: #d4ff00; /* Amarillo/Verde más eléctrico y agresivo */
–accent-dark: #badd00;
–accent-glow: rgba(212, 255, 0, 0.2);
–bg: #f4f4f4; /* Blanco roto más industrial */
–bg-alt: #eaeaec; /* Gris asfalto claro */
–bg-warm: #111111; /* Oscuro para alto contraste en secciones clave */
–card: #ffffff;
–card-border: rgba(0,0,0,0.12);
–text: #0a0a0a;
–text-mid: #2a2a2a; /* Más oscuros para dar más peso */
–text-light: #444444;
–dark-section: #0a0a0a;
–font-display: ‘Bebas Neue’, sans-serif;
–font-body: ‘DM Sans’, sans-serif;
–radius: 4px; /* Esquinas más afiladas, mecánicas */
–radius-lg: 8px;
–shadow: 4px 4px 0px rgba(0,0,0,0.9); /* Sombra dura estilo brutalista/off-road */
–shadow-lg: 8px 8px 0px rgba(0,0,0,0.9);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(–font-body);
background: var(–bg);
color: var(–text);
font-weight: 500; /* Mayor peso en todos los párrafos base */
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* ============ HEADER ============ */
.header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
padding: 16px 40px; display: flex; align-items: center; justify-content: space-between;
background: rgba(244,244,244,0.95); backdrop-filter: blur(10px);
border-bottom: 2px solid var(–text);
transition: all 0.3s ease;
}
.header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 12px 40px; background: #fff; }
.header-logo {
font-family: var(–font-display); font-size: 24px; letter-spacing: 2px;
color: var(–text); text-decoration: none; display: flex; align-items: center; gap: 12px;
}
.header-logo img { height: 38px; width: auto; border-radius: 2px; }
.header-nav { display: flex; align-items: center; gap: 32px; list-style: none; }
.header-nav a {
color: var(–text); text-decoration: none; font-size: 14px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase; transition: color 0.2s;
}
.header-nav a:hover { color: var(–accent-dark); }
.header-nav .lang-switch {
display: flex; gap: 8px; border-left: 2px solid var(–card-border); padding-left: 24px;
}
.header-nav .lang-switch a {
font-size: 12px; padding: 4px 8px; border-radius: var(–radius); border: 2px solid transparent;
color: var(–text-light); font-weight: 700;
}
.header-nav .lang-switch a.active {
background: var(–text); color: var(–accent); border-color: var(–text);
}
.btn-book-header {
background: var(–accent); color: var(–text); font-weight: 800; font-size: 14px;
padding: 12px 28px; border-radius: var(–radius); text-decoration: none;
text-transform: uppercase; letter-spacing: 1px; border: 2px solid var(–text);
transition: all 0.2s; box-shadow: 3px 3px 0px var(–text);
}
.btn-book-header:hover {
background: var(–text); color: var(–accent);
transform: translate(-2px, -2px); box-shadow: 5px 5px 0px var(–text);
}
.mobile-menu-btn { display: none; background: none; border: none; color: var(–text); font-size: 28px; cursor: pointer; padding: 8px; }
/* ============ HERO ============ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; border-bottom: 4px solid var(–accent); }
.hero-bg { position: absolute; inset: 0; overflow: hidden; background: #000; }
.hero-bg video {
position: absolute; top: 50%; left: 50%;
min-width: 100%; min-height: 100%; width: auto; height: auto;
transform: translate(-50%, -50%); object-fit: cover;
filter: brightness(0.4) contrast(1.2) saturate(1.2);
}
.hero-bg::after {
content: »; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(135deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0.3) 60%, transparent 100%),
url(‘data:image/svg+xml;utf8,’);
}
.hero-content { position: relative; z-index: 2; max-width: 800px; padding: 160px 60px 100px; color: #fff; }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(–accent); border: 2px solid var(–accent);
color: var(–text); padding: 8px 20px; border-radius: var(–radius);
font-size: 14px; font-weight: 800; text-transform: uppercase;
letter-spacing: 2px; margin-bottom: 32px;
box-shadow: 4px 4px 0px rgba(0,0,0,0.5);
animation: fadeInLeft 0.6s cubic-bezier(0.2,0.8,0.2,1) both;
}
.hero h1 {
font-family: var(–font-display); font-size: clamp(60px, 8vw, 120px);
line-height: 0.9; letter-spacing: -2px; margin-bottom: 24px; color: #fff;
text-shadow: 4px 4px 0px rgba(0,0,0,0.8);
animation: fadeInLeft 0.6s cubic-bezier(0.2,0.8,0.2,1) 0.1s both;
}
.hero h1 .accent { color: var(–accent); display: block; }
.hero-sub {
font-size: 20px; line-height: 1.6; color: #f0f0f0; font-weight: 500;
margin-bottom: 24px; max-width: 600px;
animation: fadeInLeft 0.6s cubic-bezier(0.2,0.8,0.2,1) 0.2s both;
}
.hero-price {
font-family: var(–font-display); font-size: 42px; color: var(–accent);
letter-spacing: 1px; margin-bottom: 40px; text-shadow: 2px 2px 0px #000;
animation: fadeInLeft 0.6s cubic-bezier(0.2,0.8,0.2,1) 0.3s both;
}
.hero-price span { font-family: var(–font-body); font-size: 16px; color: #ccc; font-weight: 600; letter-spacing: 0; display: block; margin-top: 4px;}
.hero-ctas { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; animation: fadeInLeft 0.6s cubic-bezier(0.2,0.8,0.2,1) 0.4s both; }
.btn-primary {
background: var(–accent); color: var(–text); font-weight: 800; font-size: 16px;
padding: 18px 40px; border-radius: var(–radius); text-decoration: none;
text-transform: uppercase; letter-spacing: 2px; border: 2px solid var(–text);
display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
box-shadow: 4px 4px 0px var(–text); transition: all 0.2s;
}
.btn-primary:hover {
background: var(–text); color: var(–accent); border-color: var(–accent);
transform: translate(-2px, -2px); box-shadow: 6px 6px 0px var(–accent);
}
.btn-whatsapp {
background: rgba(0,0,0,0.6); border: 2px solid #25D366;
color: #fff; font-weight: 700; font-size: 15px; padding: 16px 32px;
border-radius: var(–radius); text-decoration: none; transition: all 0.2s;
display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 1px;
}
.btn-whatsapp:hover { background: #25D366; color: var(–text); transform: translate(-2px, -2px); box-shadow: 4px 4px 0px var(–text); }
.hero-reviews {
position: relative; z-index: 2; margin-top: 32px;
display: flex; align-items: center; gap: 16px;
animation: fadeInLeft 0.6s cubic-bezier(0.2,0.8,0.2,1) 0.5s both;
}
.hero-reviews .stars { color: var(–accent); font-size: 20px; letter-spacing: 2px; text-shadow: 1px 1px 0 #000; }
.hero-reviews span { color: #fff; font-size: 15px; font-weight: 600; }
/* ============ TRUST BAR ============ */
.trust-bar {
background: var(–text); border-bottom: 4px solid var(–accent); color: #fff;
padding: 24px 40px; display: flex; justify-content: center; gap: 60px; flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.trust-item .icon {
width: 40px; height: 40px; background: var(–accent);
display: flex; align-items: center; justify-content: center; font-size: 18px;
color: var(–text); flex-shrink: 0; border: 2px solid #fff; border-radius: 2px;
}
/* ============ SECTIONS GENERAL ============ */
.section { padding: 120px 40px; border-bottom: 2px solid var(–card-border); }
.section-label { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 4px; color: var(–text-light); margin-bottom: 16px; border-left: 4px solid var(–accent); padding-left: 12px; display: inline-block;}
.section-title { font-family: var(–font-display); font-size: clamp(48px, 6vw, 80px); line-height: 0.95; margin-bottom: 24px; color: var(–text); text-transform: uppercase;}
.section-desc { font-size: 18px; color: var(–text-mid); max-width: 600px; line-height: 1.6; margin-bottom: 60px; font-weight: 500; }
/* ============ TOURS ============ */
.tours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 32px; max-width: 1100px; margin: 0 auto; }
.tour-card {
background: #fff; border-radius: 20px; overflow: hidden;
border: 1px solid rgba(0,0,0,0.07);
box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
transition: box-shadow 0.3s ease, transform 0.3s ease; position: relative;
}
.tour-card:hover { transform: translateY(-6px); box-shadow: 0 20px 56px rgba(0,0,0,0.13), 0 4px 12px rgba(0,0,0,0.06); }
.tour-card-img { position: relative; height: 300px; overflow: hidden; }
.tour-card-img::after { content: »; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.5) 100%); pointer-events: none; }
.tour-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tour-card:hover .tour-card-img img { transform: scale(1.04); }
.tour-badge { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(–accent); color: var(–text); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 14px; border-radius: 100px; }
.tour-badge.quad-badge { background: var(–text); color: var(–accent); }
.tour-duration { position: absolute; bottom: 16px; right: 16px; z-index: 2; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px); color: #fff; padding: 6px 14px; font-size: 12px; font-weight: 700; border-radius: 100px; letter-spacing: 0.5px; }
.tour-card-body { padding: 28px 28px 20px; }
.tour-card-title { font-family: var(–font-display); font-size: 30px; letter-spacing: 1px; margin-bottom: 20px; color: var(–text); line-height: 1; }
.tour-price-block { background: #0a0a0a; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.tour-price-main { font-family: var(–font-display); font-size: 54px; color: var(–accent); letter-spacing: -1px; line-height: 1; margin-bottom: 4px; }
.tour-price-main span { font-family: var(–font-body); font-size: 20px; font-weight: 700; letter-spacing: 0; color: #fff; }
.tour-price-sub { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 500; margin-bottom: 10px; }
.tour-price-alt { font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 700; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); }
.tour-highlights { list-style: none; margin-bottom: 16px; }
.tour-highlights li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; color: #333; border-bottom: 1px solid rgba(0,0,0,0.06); font-weight: 500; }
.tour-highlights li:last-child { border-bottom: none; }
.tour-highlights li .hi-icon { font-size: 13px; flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #f0f0ec; border-radius: 6px; }
.tour-highlights li strong { color: var(–text); font-weight: 700; }
.tour-trust { display: flex; gap: 16px; flex-wrap: wrap; padding: 16px 0 0; border-top: 1px solid rgba(0,0,0,0.07); }
.tour-trust-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; font-weight: 600; }
.tour-trust-item i { font-size: 11px; color: var(–text); }
.tour-cta-block { padding: 20px 28px 28px; }
.btn-tour {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
background: var(–accent); color: var(–text); font-weight: 800; font-size: 15px;
padding: 18px 32px; text-decoration: none; text-transform: uppercase; letter-spacing: 1px;
border-radius: 12px; border: none;
box-shadow: 0 4px 20px rgba(212,255,0,0.3);
transition: all 0.2s ease;
}
.btn-tour:hover { background: #c8f200; box-shadow: 0 8px 32px rgba(212,255,0,0.45); transform: translateY(-2px); color: var(–text); }
.tour-urgency { text-align: center; font-size: 12px; color: #999; font-weight: 600; margin-top: 10px; letter-spacing: 0.3px; }
.tour-cancel { text-align: center; font-size: 12px; color: #999; font-weight: 600; padding: 0 28px 20px; text-transform: uppercase; letter-spacing: 0.3px; }
/* ============ RESPONSIBILITY ============ */
.responsibility-section { background: var(–dark-section); padding: 120px 40px; color: #fff; border-bottom: 4px solid var(–accent); }
.responsibility-section .section-title { color: #fff; text-align: center; margin-bottom: 60px; }
.responsibility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto; }
.responsibility-item { text-align: center; padding: 40px 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-bottom: 4px solid var(–accent); transition: transform 0.3s;}
.responsibility-item:hover { transform: translateY(-8px); background: rgba(255,255,255,0.05); }
.responsibility-icon {
width: 80px; height: 80px; background: var(–accent); border: 2px solid #fff;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px; font-size: 32px; color: var(–text);
box-shadow: 4px 4px 0px rgba(255,255,255,0.2);
}
.responsibility-item h3 { font-family: var(–font-display); font-size: 26px; letter-spacing: 1.5px; margin-bottom: 16px; color: var(–accent); }
.responsibility-item p { font-size: 16px; color: #ccc; line-height: 1.6; max-width: 300px; margin: 0 auto; font-weight: 500;}
/* ============ PRIVATE TOURS ============ */
.private-section { padding: 100px 40px; background: var(–bg-alt); }
.private-card {
max-width: 900px; margin: 0 auto;
background: var(–accent);
border: 4px solid var(–text); padding: 60px 48px; text-align: center;
position: relative; overflow: hidden; color: var(–text);
box-shadow: var(–shadow-lg);
}
.private-card::before {
content: »; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 20px);
pointer-events: none;
}
.private-card > * { position: relative; z-index: 1; }
.private-card h2 { font-family: var(–font-display); font-size: clamp(40px, 6vw, 64px); color: var(–text); margin-bottom: 20px; line-height: 1;}
.private-card p { font-size: 18px; color: var(–text-mid); line-height: 1.6; max-width: 600px; margin: 0 auto 32px; font-weight: 600; }
.private-btns { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn-private {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 32px; text-decoration: none;
font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 1px;
transition: all 0.2s; border: 2px solid var(–text); background: #fff; color: var(–text);
box-shadow: 4px 4px 0px var(–text);
}
.btn-private:hover { background: var(–text); color: var(–accent); transform: translate(-2px, -2px); box-shadow: 6px 6px 0px var(–text); }
.btn-private.wa { background: #25D366; color: #fff; border-color: #128C7E; box-shadow: 4px 4px 0px #128C7E;}
.btn-private.wa:hover { background: #128C7E; box-shadow: 6px 6px 0px #075E54; }
/* ============ REVIEWS ============ */
.reviews-section { background: var(–bg-warm); padding: 120px 40px; color: #fff; }
.reviews-header { text-align: center; max-width: 600px; margin: 0 auto 60px; }
.reviews-header .section-label { color: var(–accent); border-color: #fff; }
.reviews-header .section-title { color: #fff; }
.reviews-score { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 40px; background: rgba(255,255,255,0.05); padding: 20px; border: 1px solid rgba(255,255,255,0.1); border-radius: var(–radius);}
.reviews-score .big-number { font-family: var(–font-display); font-size: 80px; color: var(–accent); line-height: 1; text-shadow: 4px 4px 0 #000; }
.reviews-score .score-detail { text-align: left; }
.reviews-score .stars { color: var(–accent); font-size: 24px; letter-spacing: 2px; margin-bottom: 8px; }
.reviews-score .count { font-size: 15px; color: #ccc; font-weight: 600;}
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 32px; max-width: 1200px; margin: 0 auto; }
.review-card {
background: var(–text); border: 2px solid var(–accent); padding: 32px;
box-shadow: 6px 6px 0px rgba(0,0,0,0.5); transition: all 0.3s;
}
.review-card:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0px var(–accent); }
.review-card-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.review-avatar { width: 50px; height: 50px; background: var(–accent); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(–text); font-size: 18px; border: 2px solid #fff; }
.review-name { font-weight: 800; font-size: 16px; color: #fff; text-transform: uppercase; letter-spacing: 1px;}
.review-origin { font-size: 13px; color: #999; font-weight: 600;}
.review-stars { color: var(–accent); font-size: 16px; letter-spacing: 2px; margin-bottom: 16px; }
.review-text { font-size: 16px; line-height: 1.6; color: #ddd; font-style: italic; font-weight: 500; }
.review-source { margin-top: 24px; font-size: 13px; color: var(–accent); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px;}
/* ============ HOW IT WORKS ============ */
.how-section { padding: 120px 40px; background: var(–bg); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto; }
.how-step { text-align: center; position: relative; padding: 40px 24px; border: 2px solid var(–card-border); background: var(–card); transition: all 0.3s;}
.how-step:hover { border-color: var(–text); box-shadow: 6px 6px 0 var(–accent); transform: translateY(-4px);}
.how-step::after { content: ‘»’; position: absolute; right: -36px; top: 50%; transform: translateY(-50%); font-size: 40px; color: var(–text); font-family: var(–font-display); }
.how-step:last-child::after { display: none; }
.how-number {
width: 72px; height: 72px; background: var(–text); border: 2px solid var(–accent);
display: flex; align-items: center; justify-content: center;
font-family: var(–font-display); font-size: 36px; color: var(–accent);
margin: 0 auto 24px; box-shadow: 4px 4px 0px var(–accent);
}
.how-step h3 { font-family: var(–font-display); font-size: 30px; margin-bottom: 16px; letter-spacing: 1.5px; color: var(–text); }
.how-step p { font-size: 16px; color: var(–text-mid); line-height: 1.6; max-width: 280px; margin: 0 auto; font-weight: 600;}
/* ============ WHY BOOK DIRECT ============ */
.direct-section {
padding: 100px 40px; background: var(–dark-section);
border-top: 4px solid var(–text); border-bottom: 4px solid var(–text);
}
.direct-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.direct-title { font-family: var(–font-display); font-size: clamp(48px, 5vw, 64px); line-height: 0.95; margin-bottom: 24px; color: #fff; }
.direct-title .accent { color: var(–accent); text-shadow: none; }
.direct-section .section-label { color: var(–accent); border-color: var(–accent); }
.direct-desc { font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 32px; font-weight: 500; }
.direct-benefits { list-style: none; display: grid; gap: 20px; }
.direct-benefits li { display: flex; align-items: flex-start; gap: 16px; font-size: 16px; color: rgba(255,255,255,0.75); line-height: 1.5; font-weight: 500;}
.direct-benefits li strong { color: #fff; font-weight: 800;}
.direct-benefits li .check {
width: 32px; height: 32px; background: var(–accent); color: var(–text);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 16px; font-weight: 800; border: 2px solid #fff;
}
.direct-comparison { background: #1a1a1a; border: 2px solid rgba(255,255,255,0.15); box-shadow: 0 24px 48px rgba(0,0,0,0.4); border-radius: var(–radius-lg); overflow: hidden; }
.direct-comparison-header { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.1); background: #111;}
.direct-comparison-header > div { padding: 20px 12px; }
.direct-comparison-header > div:first-child { color: rgba(255,255,255,0.4); }
.direct-comparison-header .ours { background: var(–accent); color: var(–text); border-left: none; border-right: none;}
.direct-comparison-header .theirs { color: rgba(255,255,255,0.4); }
.comp-row { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.07); font-weight: 600;}
.comp-row:last-child { border-bottom: none; }
.comp-row > div { padding: 16px 12px; display: flex; align-items: center; justify-content: center; }
.comp-row > div:first-child { color: rgba(255,255,255,0.7); font-size: 14px; text-align: left; justify-content: flex-start; font-weight: 600; padding-left: 20px;}
.comp-row > div:nth-child(2) { background: rgba(212,255,0,0.07); }
.comp-yes { color: var(–accent); font-weight: 800; }
.comp-no { color: rgba(255,255,255,0.3); font-size: 13px; font-weight: 600;}
/* ============ FAQ ============ */
.faq-section { padding: 120px 40px; max-width: 900px; margin: 0 auto; }
.faq-item { border-bottom: 2px solid var(–card-border); transition: all 0.3s; }
.faq-item:hover { border-color: var(–text); }
.faq-q {
width: 100%; background: none; border: none; color: var(–text); font-size: 18px;
font-weight: 700; font-family: var(–font-body); padding: 32px 0; text-align: left;
cursor: pointer; display: flex; justify-content: space-between; align-items: center;
transition: all 0.3s; gap: 20px; text-transform: uppercase; letter-spacing: 0.5px;
}
.faq-q:hover { color: var(–accent-dark); padding-left: 10px; }
.faq-q .faq-icon { font-size: 28px; transition: transform 0.3s ease; color: var(–text); flex-shrink: 0; font-weight: 800; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; font-size: 16px; color: var(–text-mid); line-height: 1.6; font-weight: 500; }
.faq-item.open { border-color: var(–accent-dark); }
.faq-item.open .faq-a { max-height: 500px; padding-bottom: 32px; }
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(–accent-dark); }
/* ============ CTA FINAL ============ */
.cta-section {
padding: 140px 40px; text-align: center; position: relative; overflow: hidden;
background: var(–dark-section); color: #fff; border-top: 4px solid var(–accent);
}
.cta-section::before {
content: »; position: absolute; inset: 0;
background: url(‘data:image/svg+xml;utf8,’);
background-size: 40px 40px; pointer-events: none;
}
.cta-section .section-label { color: var(–text); background: var(–accent); padding: 8px 16px; border: none; }
.cta-section .section-title { font-size: clamp(52px, 8vw, 90px); margin-bottom: 24px; color: #fff; text-shadow: 4px 4px 0 #000; position: relative; z-index: 2;}
.cta-section .section-desc { margin: 0 auto 48px; text-align: center; color: #ddd; font-size: 20px; font-weight: 500; position: relative; z-index: 2; max-width: 700px;}
/* ============ FOOTER ============ */
.footer { background: #050505; border-top: 4px solid var(–text); padding: 80px 40px 30px; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr; gap: 40px; max-width: 1300px; margin: 0 auto 60px; }
.footer-brand p { font-size: 15px; color: #aaa; line-height: 1.6; max-width: 320px; margin-top: 16px; font-weight: 500;}
.footer h4 { font-family: var(–font-display); font-size: 22px; letter-spacing: 1.5px; margin-bottom: 24px; color: var(–accent); text-transform: uppercase; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 12px; }
.footer ul a { color: #bbb; text-decoration: none; font-size: 15px; transition: color 0.2s; font-weight: 600;}
.footer ul a:hover { color: var(–accent); padding-left: 4px;}
.footer-social { display: flex; gap: 16px; margin-top: 24px; }
.footer-social a { width: 44px; height: 44px; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 18px; transition: all 0.2s; }
.footer-social a:hover { background: var(–accent); color: var(–text); border-color: var(–accent); transform: translateY(-4px); box-shadow: 4px 4px 0px rgba(255,255,255,0.2);}
.footer-bottom { border-top: 2px solid rgba(255,255,255,0.1); padding-top: 32px; text-align: center; font-size: 13px; color: #666; max-width: 1200px; margin: 0 auto; font-weight: 600; letter-spacing: 1px;}
.footer-bottom a { color: var(–accent); text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
/* ============ MAP ============ */
.map-section { padding: 0; border-bottom: 4px solid var(–accent); }
.map-section iframe { width: 100%; height: 400px; border: none; filter: grayscale(0.8) contrast(1.2); }
/* ============ STICKY MOBILE BAR ============ */
.sticky-bar {
display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
background: var(–text); border-top: 4px solid var(–accent);
padding: 16px 20px; align-items: center; justify-content: space-between;
box-shadow: 0 -8px 30px rgba(0,0,0,0.3);
}
.sticky-bar .sticky-price { font-family: var(–font-display); font-size: 32px; color: var(–accent); line-height: 1;}
.sticky-bar .sticky-price small { font-family: var(–font-body); font-size: 12px; color: #fff; display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;}
.sticky-bar .sticky-btns { display: flex; gap: 12px; }
.sticky-bar .btn-sticky-book { background: var(–accent); color: var(–text); font-weight: 800; font-size: 14px; padding: 14px 28px; border: 2px solid var(–text); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; box-shadow: 3px 3px 0px var(–text); }
.sticky-bar .btn-sticky-wa { width: 50px; height: 50px; background: #25D366; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 22px; color: #fff; border: 2px solid var(–text); box-shadow: 3px 3px 0px var(–text);}
/* ============ WHATSAPP FLOAT ============ */
.wa-float {
position: fixed; bottom: 32px; right: 32px; z-index: 998;
width: 64px; height: 64px; background: #25D366; border: 2px solid #fff;
display: flex; align-items: center; justify-content: center;
font-size: 32px; color: #fff; text-decoration: none;
box-shadow: 4px 4px 0px rgba(0,0,0,0.3); transition: all 0.2s;
}
.wa-float:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px rgba(0,0,0,0.4); }
/* ============ ENHANCED ANIMATIONS ============ */
@keyframes fadeInLeft {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: translateX(0); }
}
/* Scroll-triggered animations */
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.2,0.8,0.2,1); }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.animate-on-scroll.from-left { transform: translateX(-40px); }
.animate-on-scroll.from-left.visible { transform: translateX(0); }
.animate-on-scroll.from-right { transform: translateX(40px); }
.animate-on-scroll.from-right.visible { transform: translateX(0); }
.animate-on-scroll.scale-up { transform: scale(0.95); }
.animate-on-scroll.scale-up.visible { transform: scale(1); }
/* Stagger */
.stagger-children > .animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.stagger-children > .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > .animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.stagger-children > .animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }
/* ============ COUNTER ANIMATION ============ */
.counter-row {
display: flex; justify-content: center; gap: 80px; flex-wrap: wrap;
padding: 80px 40px; background: var(–text); color: #fff; border-bottom: 4px solid var(–accent);
}
.counter-item { text-align: center; }
.counter-number { font-family: var(–font-display); font-size: 64px; color: var(–accent); line-height: 1; text-shadow: 2px 2px 0 #000;}
.counter-label { font-size: 16px; color: #ccc; margin-top: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;}
/* ============ INSTAGRAM FEED ============ */
.instagram-section {
padding: 100px 40px;
background: #fff;
border-bottom: 1px solid rgba(0,0,0,0.07);
}
.instagram-header {
text-align: center;
margin-bottom: 48px;
}
.instagram-header .section-label { margin-bottom: 12px; }
.instagram-header h2 { font-family: var(–font-display); font-size: clamp(36px, 5vw, 56px); color: var(–text); line-height: 0.95; margin-bottom: 16px; }
.instagram-handle {
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none; color: var(–text);
font-size: 16px; font-weight: 700; letter-spacing: 0.5px;
border-bottom: 2px solid var(–accent); padding-bottom: 2px;
transition: color 0.2s;
}
.instagram-handle:hover { color: #C13584; }
.instagram-handle .ig-icon {
width: 32px; height: 32px; border-radius: 8px;
background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 16px; flex-shrink: 0;
}
.instagram-feed-wrapper {
max-width: 1100px;
margin: 0 auto 40px;
min-height: 280px;
}
/* Elfsight override to fit the page */
.elfsight-app-placeholder {
width: 100%;
min-height: 280px;
background: #f7f7f5;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
color: #aaa; font-size: 14px; font-weight: 600;
}
.instagram-cta {
text-align: center;
margin-top: 32px;
}
.btn-instagram {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 32px; border-radius: 100px;
background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
color: #fff; font-weight: 800; font-size: 14px;
text-decoration: none; text-transform: uppercase; letter-spacing: 1px;
transition: opacity 0.2s, transform 0.2s;
box-shadow: 0 6px 24px rgba(193,53,132,0.3);
}
.btn-instagram:hover { opacity: 0.9; transform: translateY(-2px); }
/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
.header-nav { display: none; }
.mobile-menu-btn { display: block; }
.direct-inner { grid-template-columns: 1fr; gap: 40px;}
.how-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how-step::after { display: none; }
.how-step { padding: 24px 16px; }
.how-number { width: 44px; height: 44px; font-size: 22px; margin-bottom: 12px; }
.how-step h3 { font-size: 20px; margin-bottom: 10px; }
.how-step p { font-size: 13px; }
.footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.responsibility-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.responsibility-item { padding: 24px 14px; }
.responsibility-icon { width: 52px; height: 52px; font-size: 22px; margin-bottom: 16px; }
.responsibility-item h3 { font-size: 18px; margin-bottom: 10px; }
.responsibility-item p { font-size: 13px; }
.counter-row { gap: 40px; padding: 60px 20px;}
}
@media (max-width: 768px) {
.hero-content { padding: 140px 24px 80px; }
.hero h1 { font-size: clamp(48px, 12vw, 70px); }
.hero-price { font-size: 32px; }
.section { padding: 80px 24px; }
.trust-bar { gap: 20px; padding: 20px; }
.trust-item { font-size: 13px; gap: 10px; flex: 1 1 45%; min-width: 0; }
.trust-item .icon { width: 32px; height: 32px; font-size: 14px; }
.tours-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.tour-card-img { height: 240px; }
.tour-card-body { padding: 22px 22px 16px; }
.tour-cta-block { padding: 16px 22px 24px; }
.reviews-grid { grid-template-columns: 1fr; }
.how-section { padding: 60px 16px; }
.how-grid { gap: 10px; }
.how-step { padding: 18px 10px; }
.how-step h3 { font-size: 17px; }
.how-step p { font-size: 12px; line-height: 1.5; }
.responsibility-grid { gap: 10px; }
.responsibility-item { padding: 18px 10px; }
.responsibility-item h3 { font-size: 15px; letter-spacing: 0.5px; }
.responsibility-item p { font-size: 12px; }
.direct-section { padding: 80px 24px; }
.faq-section { padding: 80px 24px; }
.faq-q { font-size: 16px; padding: 24px 0;}
.cta-section { padding: 100px 24px; }
.cta-section .btn-primary { font-size: 15px; padding: 16px 32px; width: 100%; justify-content: center; }
.private-section { padding: 80px 24px; }
.private-card { padding: 40px 24px; }
.private-btns { flex-direction: column; align-items: center; }
.btn-private { width: 100%; max-width: 300px; justify-content: center; }
.responsibility-section { padding: 80px 24px; }
.footer { padding: 60px 24px 30px; }
.footer-grid { grid-template-columns: 1fr; gap: 40px; }
.sticky-bar { display: flex; }
.wa-float { bottom: 96px; right: 20px; width: 56px; height: 56px; font-size: 28px; }
.header { padding: 16px; border-bottom-width: 2px;}
.header-logo { font-size: 20px; }
.header-logo img { height: 32px; }
.map-section iframe { height: 300px; }
.counter-number { font-size: 48px; }
.counter-label { font-size: 14px; }
}
@media (max-width: 480px) {
.hero-content { padding: 120px 20px 60px; }
.hero h1 { font-size: clamp(42px, 13vw, 56px); }
.hero-sub { font-size: 16px; }
.hero-price { font-size: 28px; margin-bottom: 32px; }
.hero-price span { font-size: 14px; }
.hero-ctas { flex-direction: column; align-items: stretch; gap: 16px;}
.btn-primary { text-align: center; justify-content: center; font-size: 15px; padding: 16px; }
.btn-whatsapp { justify-content: center; font-size: 14px; }
.hero-reviews { flex-direction: column; align-items: flex-start; gap: 8px; }
.hero-reviews span { font-size: 13px; }
.trust-item { flex: 1 1 100%; }
.comp-row > div { padding: 12px 8px; font-size: 13px; }
.comp-no { font-size: 12px; }
.direct-comparison-header { font-size: 12px; }
.section-title { font-size: clamp(36px, 9vw, 52px); }
.counter-row { gap: 30px; }
.counter-number { font-size: 42px; }
.btn-book-header { display: none; } /* Hide booking button on very small screens to save header space */
}
★ Valorado como el tour en buggy #1 de Ibiza
EXPLORA IBIZAOFF-ROAD
Aventura guiada de 2,5 horas entre playas escondidas, antiguos bosques de pinos y espectaculares miradores costeros. Buggies Polaris premium. Grupos reducidos.
DESDE 90€ POR PERSONA (Compartiendo un buggy de 4 personas)
✓
Cancelación gratuita hasta 24h antes
Buggies Polaris RZR premium
Mejor precio — reserva directa y ahorra
Elige tu aventura
Descubre el lado más salvaje de Ibiza. Desde calas escondidas hasta acantilados panorámicos: cada ruta es inolvidable.
¿Cuánto cuesta el tour en buggy?+
Nuestro tour en buggy empieza desde 90€ por persona (hasta 4 personas — vehículo privado). También ofrecemos buggies de 4 plazas para familias y tours privados. Solo pagas un 20% de depósito al reservar; el resto, el día del tour.
Punto de encuentro y horario+
Salimos desde nuestra base en Sant Antoni de Portmany. Por favor, llega 20 minutos antes de tu horario reservado para la explicación de seguridad y el papeleo.
¿Necesito experiencia conduciendo?+
¡No necesitas experiencia previa! Nuestros buggies son automáticos y muy fáciles de conducir. Antes de comenzar, recibirás una explicación completa sobre seguridad. Solo necesitas disponer de un permiso de conducir de coche válido (B) y tener al menos 25 años.
Recuerda que se trata de un tour guiado, no de una actividad de conducción libre. Debes seguir en todo momento las instrucciones del guía, respetar las normas de tráfico y seguridad, mantener una distancia adecuada y conducir de forma responsable y respetuosa con los demás usuarios de la vía, peatones, residentes locales, otros participantes y cualquier tercera persona.
No se tolerarán conductas peligrosas, temerarias, agresivas o irrespetuosas. Las instrucciones del guía son obligatorias y tienen como objetivo garantizar la seguridad de todo el grupo y de las personas que se encuentren alrededor.
Si un participante ignora las indicaciones del guía, incumple las normas, pone en riesgo a otras personas o conduce de forma irresponsable, el vehículo le será retirado de inmediato y su actividad se dará por finalizada. En estos casos, NO habrá devolución del dinero, compensación ni posibilidad de reprogramar la actividad.
¿Qué ropa debo llevar?+
Es una aventura, así que ven preparado. OBLIGATORIO: calzado cerrado (zapatillas deportivas). ¡No se permiten chanclas para conducir! RECOMENDADO: gafas de sol, ropa cómoda que pueda ensuciarse y bañador. Nosotros proporcionamos gafas protectoras off-road.
¿Qué necesito para conducir?+
Un permiso de conducir original y válido de categoría B (coche). Debes tener al menos 25 años para conducir. Los pasajeros pueden tener desde 2 años. Si tu permiso fue emitido fuera de la UE, se requerirá un pequeño depósito.
¿Pueden venir niños al tour?+
¡Sí! Los pasajeros pueden tener desde 2 años. Es una actividad fantástica para familias. A los niños les encanta.
¿Qué pasa si llueve?+
Si el tiempo es demasiado malo, te ofreceremos un cambio de fecha gratuito o un reembolso completo. No te preocupes: ¡Ibiza tiene más de 300 días de sol al año!
Cambios y cancelaciones+
Para recibir el reembolso completo, debes cancelar al menos 24 horas antes del inicio de la experiencia.
¿Listo?
Únete a más de 5.000 aventureros felices que descubrieron la Ibiza más auténtica. Reserva tu plaza ahora: las fechas más populares se agotan rápido.
Ver disponibilidad y reservar →
// FAQ accordion
document.querySelectorAll(‘.faq-q’).forEach(btn => {
btn.addEventListener(‘click’, () => {
const item = btn.parentElement;
const wasOpen = item.classList.contains(‘open’);
document.querySelectorAll(‘.faq-item’).forEach(i => i.classList.remove(‘open’));
if (!wasOpen) item.classList.add(‘open’);
});
});
// Enhanced scroll reveal with stagger
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘visible’);
}
});
}, { threshold: 0.08, rootMargin: ‘0px 0px -40px 0px’ });
document.querySelectorAll(‘.animate-on-scroll’).forEach(el => observer.observe(el));
// Counter animation
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const counters = entry.target.querySelectorAll(‘.counter-number’);
counters.forEach(counter => {
const target = parseInt(counter.getAttribute(‘data-target’));
const duration = 2000;
const step = target / (duration / 16);
let current = 0;
const timer = setInterval(() => {
current += step;
if (current >= target) { counter.textContent = target.toLocaleString() + ‘+’; clearInterval(timer); }
else { counter.textContent = Math.floor(current).toLocaleString(); }
}, 16);
});
counterObserver.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
document.querySelectorAll(‘.counter-row’).forEach(el => counterObserver.observe(el));
// Header scroll effect
window.addEventListener(‘scroll’, () => {
const header = document.querySelector(‘.header’);
header.classList.toggle(‘scrolled’, window.scrollY > 60);
// Sticky bar
const bar = document.querySelector(‘.sticky-bar’);
if (window.innerWidth 600 ? ‘flex’ : ‘none’;
}
});
// Mobile menu
const mobileBtn = document.querySelector(‘.mobile-menu-btn’);
const headerNav = document.querySelector(‘.header-nav’);
if (mobileBtn) {
mobileBtn.addEventListener(‘click’, () => {
if (headerNav.style.display === ‘flex’) {
headerNav.style.display = ‘none’;
} else {
headerNav.style.display = ‘flex’;
headerNav.style.flexDirection = ‘column’;
headerNav.style.position = ‘absolute’;
headerNav.style.top = ‘100%’;
headerNav.style.left = ‘0’;
headerNav.style.right = ‘0’;
headerNav.style.background = ‘rgba(250,248,245,0.97)’;
headerNav.style.padding = ’20px’;
headerNav.style.gap = ’16px’;
headerNav.style.backdropFilter = ‘blur(20px)’;
headerNav.style.boxShadow = ‘0 8px 30px rgba(0,0,0,0.08)’;
headerNav.style.borderBottom = ‘1px solid rgba(0,0,0,0.06)’;
}
});
}
Book Now
