<div style="display:none;">
Surf School
</div>
<!-- ===== WildMex — Feature Cards (2 items) ===== -->
<section id="wmx-feature-cards" role="region" aria-labelledby="wmx-feature-title">
<h2 class="sr-only" id="wmx-feature-title">Featured services</h2><div class="wmx-grid">
<!-- Card 1: Learning to Surf (Punta Mita) -->
<article class="wmx-card">
<a class="wmx-card__media" href="/activities/surf-punta-mita">
<img
src="/wp-content/uploads/2018/09/punta-de-mita-surf-lessons-sayulita-e1538417046604-352x198.jpg"
alt="Learning to surf in Punta Mita"
loading="lazy"
/>
</a>
<div class="wmx-card__body">
<h3 class="wmx-card__title">
<a href="/activities/surf-punta-mita">Learning to Surf Punta Mita</a>
</h3>
<p class="wmx-card__text">
Enjoy the thrill of catching your first wave or level up your surfing in Punta Mita or Sayulita — with the best surf school in Mexico.
</p>
<a class="wmx-btn-orange" href="/activities/surf-punta-mita">
<i class="fa fa-check-square-o" aria-hidden="true"></i>
<span>Take a Surf Lesson</span>
</a>
</div>
</article><!-- Card 2: Equipment Rentals -->
<article class="wmx-card">
<a class="wmx-card__media" href="/surfboard-rentals-sayulita-punta-mita-sup-and-bikes-rentals/">
<img
src="https://wildmex.com/wp-content/uploads/2018/11/surf-board-rentals-352x198.jpg"
alt="Equipment rentals: surfboards, SUP and bikes"
loading="lazy"
/>
</a>
<div class="wmx-card__body">
<h3 class="wmx-card__title">
<a href="/surfboard-rentals-sayulita-punta-mita-sup-and-bikes-rentals/">Equipment Rentals</a>
</h3>
<p class="wmx-card__text">
Choose from 300+ surfboards plus SUP and MTB options. Hourly, daily and long-term rentals available.
</p>
<a class="wmx-btn-orange" href="/surfboard-rentals-sayulita-punta-mita-sup-and-bikes-rentals/">
<i class="fa fa-check-square-o" aria-hidden="true"></i>
<span>Go to Rentals</span>
</a>
</div>
</article>
</div>
</section><style>
/* ===== WildMex — Feature Cards (scoped) ===== */
#wmx-feature-cards{
--brand:#ff6601; --brand-hover:#e25700;
--text:#1f2937; --muted:#6b7280; --line:#e5e7eb; --card:#fff;
font-family:"Segoe UI", Roboto, Arial, sans-serif;
color:var(--text);
}/* Responsive grid: 1–2 cols */
#wmx-feature-cards .wmx-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap:18px;
}/* Card */
#wmx-feature-cards .wmx-card{
background:var(--card);
border:1px solid var(--line);
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 22px rgba(0,0,0,.06);
transition:transform .18s ease, box-shadow .18s ease;
display:flex; flex-direction:column; height:100%;
}
#wmx-feature-cards .wmx-card:hover{
transform:translateY(-3px);
box-shadow:0 16px 36px rgba(0,0,0,.12);
}/* Media with 16:9 ratio */
#wmx-feature-cards .wmx-card__media{
position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#f3f4f6;
}
#wmx-feature-cards .wmx-card__media img{
width:100%; height:100%; object-fit:cover; display:block;
transform:scale(1); transition:transform .35s ease;
}
#wmx-feature-cards .wmx-card:hover .wmx-card__media img{ transform:scale(1.05); }/* Body */
#wmx-feature-cards .wmx-card__body{
padding:16px; display:flex; flex-direction:column; gap:10px; flex:1;
}/* Title + link */
#wmx-feature-cards .wmx-card__title{ margin:0; font-size:18px; font-weight:900; line-height:1.25; }
#wmx-feature-cards .wmx-card__title a{
color:#111827; text-decoration:none;
background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
transition:color .2s ease, background-size .2s ease;
}
#wmx-feature-cards .wmx-card__title a:hover{
color:var(--brand); background-size:100% 2px;
}/* Excerpt (clamp for consistent heights) */
#wmx-feature-cards .wmx-card__text{
margin:0; color:var(--muted); line-height:1.55;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}/* Button: 100% width, icon aligned */
#wmx-feature-cards .wmx-btn-orange{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
width:100%; max-width:none;
background:var(--brand); color:#fff !important; text-decoration:none;
padding:12px 16px; border-radius:12px; font-weight:900; font-size:14px;
text-transform:uppercase; letter-spacing:.35px; line-height:1;
box-shadow:0 12px 24px rgba(0,0,0,.18);
transition:background .25s ease, transform .05s ease, box-shadow .25s ease;
margin-top:auto; /* empuja el botón al fondo de la tarjeta */
}
#wmx-feature-cards .wmx-btn-orange:hover{
background:var(--brand-hover); transform:translateY(-1px);
box-shadow:0 16px 30px rgba(0,0,0,.22);
}
#wmx-feature-cards .wmx-btn-orange i{
display:inline-flex; align-items:center; justify-content:center; font-size:1.1em; line-height:1;
}/* Screen-reader only helper */
#wmx-feature-cards .sr-only{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}/* Small tweaks */
@media (max-width:520px){
#wmx-feature-cards .wmx-card__title{ font-size:17px; }
}
</style>
<!-- ===== WildMex — CTA band: Join the Surf Adventure ===== -->
<section id="wmx-cta-join" role="region" aria-labelledby="wmx-cta-join-title">
<div class="wmx-cta__inner">
<!-- Col 1: Title over decorative background -->
<div class="wmx-cta__left">
<p class="wmx-cta__kicker" id="wmx-cta-join-title">Join the Surf Adventure</p>
</div><!-- Col 2: Subcopy -->
<div class="wmx-cta__center">
<p class="wmx-cta__subtitle">Get ready for the surf trip of a lifetime with WildMex!</p>
</div><!-- Col 3: Button -->
<div class="wmx-cta__right">
<a class="wmx-btn-orange" href="/activities/surf-camp-sayulita-punta-mita/">
<i class="fa fa-check-square-o" aria-hidden="true"></i>
<span>Surf Vacation</span>
</a>
</div>
</div>
</section><style>
/* ===== WildMex — CTA band (scoped) ===== */
#wmx-cta-join{
--brand:#ff6601; --brand-hover:#e25700;
--text:#ffffff; --muted:#e6f3fb;font-family:"Segoe UI", Roboto, Arial, sans-serif;
color:var(--text);background:linear-gradient(135deg, #0ea5e9, #0369a1);
border-radius:16px;
box-shadow:0 18px 40px rgba(0,0,0,.18);
overflow:hidden;
margin:16px 0;
}#wmx-cta-join .wmx-cta__inner{
display:grid;
grid-template-columns: 1.1fr 1.4fr 0.9fr;
gap:14px;
align-items:center;
padding:18px clamp(14px, 3vw, 28px);
position:relative;
}/* Decorative canvas pattern on the left (non-essential) */
#wmx-cta-join .wmx-cta__left{
position:relative; isolation:isolate;
min-height:72px; display:flex; align-items:center;
}
#wmx-cta-join .wmx-cta__left::before{
content:"";
position:absolute; inset:-10px -6px -10px -10px;
background:url('/wp-content/uploads/2022/02/canvas-tripe.png') center/contain no-repeat;
opacity:.22; z-index:-1; pointer-events:none;
}/* Text styles */
#wmx-cta-join .wmx-cta__kicker{
margin:0;
font-weight:900;
font-size: clamp(18px, 2.2vw, 26px);
letter-spacing:.3px;
text-shadow:0 2px 2px rgba(0,0,0,.25);
}
#wmx-cta-join .wmx-cta__subtitle{
margin:0;
font-size: clamp(14px, 1.8vw, 18px);
font-weight:700;
color:var(--muted);
}/* Button (full width on mobile, tidy on desktop) */
#wmx-cta-join .wmx-btn-orange{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
width:100%;
background:var(--brand); color:#fff !important; text-decoration:none;
padding:12px 16px; border-radius:12px; font-weight:900; font-size:14px;
text-transform:uppercase; letter-spacing:.35px; line-height:1;
box-shadow:0 14px 28px rgba(0,0,0,.22);
transition:background .25s ease, transform .05s ease, box-shadow .25s ease;
}
#wmx-cta-join .wmx-btn-orange:hover{
background:var(--brand-hover);
transform:translateY(-1px);
box-shadow:0 18px 34px rgba(0,0,0,.26);
}
#wmx-cta-join .wmx-btn-orange i{
display:inline-flex; align-items:center; justify-content:center;
font-size:1.1em; line-height:1;
}/* Right column container to keep button sized nicely */
#wmx-cta-join .wmx-cta__right{
display:flex; align-items:center; justify-content:flex-end;
}
@media (min-width: 721px){
#wmx-cta-join .wmx-cta__right .wmx-btn-orange{ max-width:280px; }
}/* Responsive: stack nicely */
@media (max-width: 720px){
#wmx-cta-join .wmx-cta__inner{
grid-template-columns:1fr;
gap:10px;
text-align:center;
}
#wmx-cta-join .wmx-cta__left{ min-height:0; }
#wmx-cta-join .wmx-cta__left::before{ inset:-6px; opacity:.18; }
#wmx-cta-join .wmx-cta__right{ justify-content:center; }
}/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
#wmx-cta-join .wmx-btn-orange{ transition:none; }
}
</style>
Posted onTrustindex verifies that the original source of the review is Google. Sam from Ireland is the Lebron James of surf instructing he was greatPosted onTrustindex verifies that the original source of the review is Google. This place is great, we got surf lessons for our kids 12 & 14 Guillermo our instructor was so perfect, made the best experience so memorable. They enjoyed it so much we came back the next day to rent boards. Which was also so easy and convenient. La Lancha is a short hike from the location but it is well worth it.Posted onTrustindex verifies that the original source of the review is Google. Roberto was a fantastic teacher. He kept things simple, helped where we needed it, scouted all the good waves and allowed us to recover before catching the next one. Highly recommended.Posted onTrustindex verifies that the original source of the review is Google. I'm a surf-beginner and was pretty afraid before my lesson. But then I had a private lesson with Gabriel (Gabi). He had a Very pleasant personality and calmed me down Very well, he gave me self-confidence and chose just the best waves for me. The waves of the beach in La Lancha these days were perfect for beginners so that I had a lot of good rides! A few days later I came again - in a group lesson. This time we had Gabi and Paschalis - also a very cool and pleasant guy. This lesson was also great. Both are very nice, patient and supportive. The organization between all the MexSurf schools is also very good. There's a shuttle which brought me to the other beach and I could book via WhatsApp and pay online. Perfect choice for me ❤️Posted onTrustindex verifies that the original source of the review is Google. Awesome lessons. Adrian was awesome and created such a calm supportive vibe while also sharing the spiritual side of surfing in a really meaningful way. -RossPosted onTrustindex verifies that the original source of the review is Google. Roberto and Gabriel were so easy to learn from. They were so calm and their instructions were so descriptive my friend and I were able to get up on the wave our first try. This company was very organized. When we come back to Punta Mita we will be using WildMex again for our surfing lessons.Posted onTrustindex verifies that the original source of the review is Google. We had an amazing surf experience with Lalo! He’s an incredible guide — patient, knowledgeable, and truly passionate about surfing. He made us feel comfortable right away and adapted the lesson to our level, which made a huge difference. The vibe was relaxed, fun, and encouraging, and we learned a lot while having a great time. I would 100% recommend Lalo to anyone looking for an unforgettable surf experience!Posted onTrustindex verifies that the original source of the review is Google. We had a 3 day surf lesson with Cesar. He was a very positive and encouraging coach, and helped me figure out how to better turn the surfboard left and right when I went down the line of the wave. We started off with foam boards, and then progressed to hard top boards. I would recommend doing a lesson with WildMex, especially with Cesar. We surfed in the Punta Mita area at La Lancha Beach. It was a pristine beach.Posted onTrustindex verifies that the original source of the review is Google. Thank you for the lesson Pascal! 10/10
<!-- ===== WildMex — CTA: Shuttle to La Lancha ===== -->
<section id="wmx-cta-shuttle" role="region" aria-labelledby="wmx-cta-shuttle-title">
<div class="wmx-cta__inner">
<div class="wmx-cta__copy">
<h2 class="wmx-cta-title" id="wmx-cta-shuttle-title">
Surf at La Lancha Beach, Punta Mita
</h2>
<p class="wmx-cta-subtitle">
Wildmex can take you there! Sayulita → La Lancha Shuttle Service
</p>
</div><div class="wmx-cta__action">
<a class="wmx-btn-orange" href="/surf-shuttle-service-sayulita-punta-mita/" rel="noopener">
<i class="fa fa-check-square-o" aria-hidden="true"></i>
<span>More Info</span>
</a>
</div>
</div>
</section><style>
/* ===== WildMex — CTA band (scoped) ===== */
#wmx-cta-shuttle{
--brand:#ff6601; --brand-hover:#e25700;
--text:#ffffff; --muted:#e6f3fb;
color:var(--text);background:linear-gradient(135deg, #0ea5e9, #0369a1);
border-radius:16px;
box-shadow:0 18px 40px rgba(0,0,0,.18);
overflow:hidden;
margin:16px 0;
}
#wmx-cta-shuttle .wmx-cta__inner{
display:grid;
grid-template-columns: 1.6fr 0.8fr;
gap:14px;
align-items:center;
padding:18px clamp(14px, 3vw, 28px);
}
/* Copy */
#wmx-cta-shuttle .wmx-cta-title{
margin:0 0 6px;
font-weight:900;
font-size: clamp(20px, 3vw, 34px);
letter-spacing:.3px;
text-shadow:0 2px 2px rgba(0,0,0,.25);
}
#wmx-cta-shuttle .wmx-cta-subtitle{
margin:0;
font-size: clamp(14px, 1.8vw, 18px);
font-weight:700;
color:var(--muted);
}
/* Button */
#wmx-cta-shuttle .wmx-btn-orange{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
width:100%;
background:var(--brand); color:#fff !important; text-decoration:none;
padding:12px 16px; border-radius:12px; font-weight:900; font-size:14px;
text-transform:uppercase; letter-spacing:.35px; line-height:1;
box-shadow:0 14px 28px rgba(0,0,0,.22);
transition:background .25s ease, transform .05s ease, box-shadow .25s ease;
}
#wmx-cta-shuttle .wmx-btn-orange:hover{
background:var(--brand-hover);
transform:translateY(-1px);
box-shadow:0 18px 34px rgba(0,0,0,.26);
}
#wmx-cta-shuttle .wmx-btn-orange i{
display:inline-flex; align-items:center; justify-content:center;
font-size:1.1em; line-height:1;
}
/* Button container keeps a nice max width on desktop */
#wmx-cta-shuttle .wmx-cta__action{ display:flex; justify-content:flex-end; }
@media (min-width: 721px){
#wmx-cta-shuttle .wmx-cta__action .wmx-btn-orange{ max-width:280px; }
}
/* Responsive stack */
@media (max-width: 720px){
#wmx-cta-shuttle .wmx-cta__inner{
grid-template-columns:1fr;
gap:10px;
text-align:center;
}
#wmx-cta-shuttle .wmx-cta__action{ justify-content:center; }
#wmx-cta-shuttle .wmx-btn-orange{ width:100%; max-width:none; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
#wmx-cta-shuttle .wmx-btn-orange{ transition:none; }
}
</style>
<!-- ===== WildMex — Services Grid (4 cards) ===== -->
<section id="wmx-services" role="region" aria-labelledby="wmx-services-title">
<h2 class="sr-only" id="wmx-services-title">Services</h2><div class="wmx-grid">
<!-- 1) Surf Lessons Punta Mita -->
<article class="wmx-card">
<a class="wmx-card__media" href="/activities/surf-lessons-punta-mita-mexico/">
<img
src="https://wildmex.com/wp-content/uploads/2018/10/mexico-surf-lessons-punta-mita-352x198.jpg"
srcset="
https://wildmex.com/wp-content/uploads/2018/10/mexico-surf-lessons-punta-mita-352x198.jpg 352w,
https://wildmex.com/wp-content/uploads/2018/10/mexico-surf-lessons-punta-mita-360x204.jpg 360w
"
sizes="(max-width: 480px) 100vw, 360px"
alt="Surf lessons at Playa La Lancha, Punta Mita"
loading="lazy"
/>
</a>
<div class="wmx-card__body">
<h3 class="wmx-card__title">
<a href="/activities/surf-lessons-punta-mita-mexico/">Surf Lessons Punta Mita</a>
</h3>
<p class="wmx-card__text">
Warm water, fun waves and beautiful scenery at Playa La Lancha. The perfect spot to take your first
surf lesson or improve your abilities!
</p>
</div>
</article><!-- 2) Surf Camp Sayulita Packages -->
<article class="wmx-card">
<a class="wmx-card__media" href="/activities/surf-camp-sayulita-punta-mita/">
<img
src="https://wildmex.com/wp-content/uploads/2018/10/surf-camp-mexico-1-352x198.jpg"
srcset="
https://wildmex.com/wp-content/uploads/2018/10/surf-camp-mexico-1-352x198.jpg 352w,
https://wildmex.com/wp-content/uploads/2018/10/surf-camp-mexico-1-360x204.jpg 360w
"
sizes="(max-width: 480px) 100vw, 360px"
alt="Surf camp in Sayulita with daily lessons"
loading="lazy"
/>
</a>
<div class="wmx-card__body">
<h3 class="wmx-card__title">
<a href="/activities/surf-camp-sayulita-punta-mita/">Surf Camp Sayulita Packages</a>
</h3>
<p class="wmx-card__text">
Join our WildMex Surf Camp and improve day by day with friendly local coaches in beautiful
Sayulita and Punta Mita.
</p>
</div>
</article><!-- 3) Puerto Vallarta Surf Lessons -->
<article class="wmx-card">
<a class="wmx-card__media" href="/activities/surf-lessons-puerto-vallarta/">
<img
src="https://wildmex.com/wp-content/uploads/2019/02/surf-puerto-vallarta-352x198.jpg"
srcset="
https://wildmex.com/wp-content/uploads/2019/02/surf-puerto-vallarta-352x198.jpg 352w,
https://wildmex.com/wp-content/uploads/2019/02/surf-puerto-vallarta-360x204.jpg 360w
"
sizes="(max-width: 480px) 100vw, 360px"
alt="Surf lessons near Puerto Vallarta"
loading="lazy"
/>
</a>
<div class="wmx-card__body">
<h3 class="wmx-card__title">
<a href="/activities/surf-lessons-puerto-vallarta/">Puerto Vallarta Surf Lessons</a>
</h3>
<p class="wmx-card__text">
Looking for surf lessons near Puerto Vallarta? Just 45 minutes from PV and 30 from Nuevo Vallarta.
</p>
</div>
</article><!-- 4) Mountain Bike Rental Sayulita -->
<article class="wmx-card">
<a class="wmx-card__media" href="/surfboard-rentals-sayulita-punta-mita-sup-and-bikes-rentals/">
<img
src="https://wildmex.com/wp-content/uploads/2018/10/wildmex-surfboard-rentals-2.jpg"
alt="Equipment rental: surf, SUP and mountain bikes"
loading="lazy"
/>
</a>
<div class="wmx-card__body">
<h3 class="wmx-card__title">
<a href="/surfboard-rentals-sayulita-punta-mita-sup-and-bikes-rentals/">Mountain Bike Rental Sayulita</a>
</h3>
<p class="wmx-card__text">
A full range of high-quality rental gear: surf, SUP and MTB. Hourly, daily and long-term options.
</p>
</div>
</article>
</div>
</section><style>
/* ===== WildMex — Services Grid (scoped) ===== */
#wmx-services{
--brand:#ff6601; --brand-hover:#e25700;
--text:#1f2937; --muted:#6b7280; --line:#e5e7eb; --card:#fff;
font-family:"Segoe UI", Roboto, Arial, sans-serif;
color:var(--text);
}/* Grid responsive: 1–4 columnas según ancho */
#wmx-services .wmx-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap:18px;
}/* Tarjeta */
#wmx-services .wmx-card{
background:var(--card);
border:1px solid var(--line);
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 22px rgba(0,0,0,.06);
transition: transform .18s ease, box-shadow .18s ease;
display:flex;
flex-direction:column;
}
#wmx-services .wmx-card:hover{
transform:translateY(-3px);
box-shadow:0 16px 36px rgba(0,0,0,.12);
}/* Imagen con proporción 16:9 y zoom suave en hover */
#wmx-services .wmx-card__media{
position:relative;
display:block;
aspect-ratio:16/9;
overflow:hidden;
background:#f3f4f6;
}
#wmx-services .wmx-card__media img{
width:100%; height:100%; object-fit:cover; display:block;
transform:scale(1);
transition:transform .35s ease;
}
#wmx-services .wmx-card:hover .wmx-card__media img{ transform:scale(1.05); }/* Cuerpo */
#wmx-services .wmx-card__body{
padding:16px;
display:flex; flex-direction:column; gap:8px;
}/* Título + enlace */
#wmx-services .wmx-card__title{
margin:0; font-size:18px; font-weight:900; line-height:1.25;
}
#wmx-services .wmx-card__title a{
color:#111827; text-decoration:none;
background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
transition:color .2s ease, background-size .2s ease;
}
#wmx-services .wmx-card__title a:hover{
color:var(--brand);
background-size:100% 2px;
}/* Resumen (clamp para alturas uniformes) */
#wmx-services .wmx-card__text{
margin:0; color:var(--muted); line-height:1.55;
display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}/* Utilidad: ocultar encabezado visual si no se usa */
#wmx-services .sr-only{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}/* Ajustes responsivos finos */
@media (max-width: 520px){
#wmx-services .wmx-card__title{ font-size:17px; }
}
</style>
<!-- ===== WildMex — Mini CTA (Best surfing in Mexico) ===== -->
<section id="wmx-cta-surf" role="region" aria-labelledby="wmx-cta-surf-title">
<div class="wmx-cta__inner">
<span class="wmx-cta__kicker">Best surfing in Mexico</span>
<h2 class="wmx-cta__title" id="wmx-cta-surf-title">Experience WildMex Surf & Adventure.</h2><!-- Botón apunta a /surf/ y usa la keyword en el texto -->
<a class="wmx-btn-orange" href="/surf/" rel="noopener" aria-label="Discover the best surfing in Mexico">
<i class="fa fa-compass" aria-hidden="true"></i>
<span>Best surfing in Mexico</span>
</a>
</div>
</section><style>
/* ===== Scoped styles ===== */
#wmx-cta-surf{
--brand:#ff6601; --brand-hover:#e25700;
--text:#ffffff; --accent:#e6f3fb;font-family:"Segoe UI", Roboto, Arial, sans-serif;
color:var(--text);background:linear-gradient(135deg, #0ea5e9, #0369a1);
border-radius:16px;
box-shadow:0 18px 40px rgba(0,0,0,.18);
padding: clamp(18px, 3.5vw, 28px);
margin: 16px 0;
text-align:center;
}/* Inner container */
#wmx-cta-surf .wmx-cta__inner{
max-width: 900px;
margin: 0 auto;
}/* Kicker */
#wmx-cta-surf .wmx-cta__kicker{
display:inline-block;
font-weight:900;
letter-spacing:.35px;
text-transform:uppercase;
font-size:12px;
padding:6px 10px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.28);
margin-bottom:10px;
}/* Title */
#wmx-cta-surf .wmx-cta__title{
margin:6px 0 14px;
font-weight:900;
font-size: clamp(22px, 3vw, 36px);
line-height:1.2;
text-shadow:0 2px 2px rgba(0,0,0,.25);
}/* Orange button */
#wmx-cta-surf .wmx-btn-orange{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
background:var(--brand); color:#fff !important; text-decoration:none;
padding:12px 18px; border-radius:12px;
font-weight:900; font-size:14px; letter-spacing:.35px; text-transform:uppercase;
line-height:1;
box-shadow:0 14px 28px rgba(0,0,0,.22);
transition:background .25s ease, transform .05s ease, box-shadow .25s ease;
width:100%; max-width: 320px;
}
#wmx-cta-surf .wmx-btn-orange:hover{
background:var(--brand-hover);
transform:translateY(-1px);
box-shadow:0 18px 34px rgba(0,0,0,.26);
}
#wmx-cta-surf .wmx-btn-orange i{
display:inline-flex; align-items:center; justify-content:center;
font-size:1.1em; line-height:1;
}/* Reduced motion */
@media (prefers-reduced-motion: reduce){
#wmx-cta-surf .wmx-btn-orange{ transition:none; }
}
</style>
<div class="siteorigin-widget-tinymce textwidget">
<p><span style="font-weight: 400;">Our WildMex Team is comprised of skilled, professional and friendly instructors, all of which share a deep love for adventure and a commitment to preserving and bettering their surroundings. Come on an adventure with us and leave with diverse friends, unforgettable memories and newfound abilities that will last a lifetime!</span></p>
<p><span style="font-weight: 400;">Join us for a surf lesson in Punta Mita or Sayulita, take a hiking tour through the jungle to discover Monkey Mountain, or go on a Snorkel Safari in the beautiful Islas Marietas and the hidden Beach of Love. And if you’re looking for an adrenaline rush, don’t forget to try out our Mountain Bike tours in Sayulita! Whatever your taste for adventure may be, we can make it happen!</span></p>
<p><span style="font-weight: 400;"><strong><a href="https://wildmex.com/activities/surf-lessons-punta-mita-mexico/">Surfing lessons</a> </strong>are available for all levels, with special introductory courses for beginners. We also run ‘surf camp’ courses over several days for those who want to focus on improving their surfing, which can be organised with or without accommodation.</span></p>
<hr class="hr--dotted">
<h5><span style="color: #3b3331;">Looking for a family surf vacation or Surf Lessons in Punta Mita or Surf Lessons in Sayulita?</span></h5>
<h6 style="font-size: 15px;"><a href="https://wildmex.com/activities/surf-camp-vacation-packages/">VIEW SURF VACATION HERE</a></h6>
<h6 style="font-size: 15px;"><a href="https://wildmex.com/activities/surf-lessons-punta-mita-mexico/">TAKE SURF LESSON NOW</a></h6>
</div>
<!-- ===== WildMex — CTA: Sayulita Surf Timing (dual buttons) ===== -->
<section id="wmx-cta-sayulita" role="region" aria-labelledby="wmx-cta-sayulita-title">
<div class="wmx-cta__inner">
<div class="wmx-cta__copy">
<h2 class="wmx-cta-title" id="wmx-cta-sayulita-title">
We know the best times to surf in Sayulita and surrounding areas…
</h2>
<p class="wmx-cta-subtitle">
Take a Surf Lesson with Wildmex to La Lancha and leave behind crowded line-ups.
</p>
</div><div class="wmx-cta__actions">
<a class="wmx-btn-orange" href="/en/store/#!/PUNTA-MITA-SURF-LESSONS-SHARED-GROUP/p/487606053/category=0" target="_blank" rel="noopener">
<i class="fa fa-check-square-o" aria-hidden="true"></i><span>Book Now</span>
</a>
<a class="wmx-btn-outline" href="/activities/surf-lessons-punta-mita-mexico/" rel="noopener">
<i class="fa fa-info-circle" aria-hidden="true"></i><span>More Info</span>
</a>
</div>
</div>
</section><style>
/* ===== WildMex — CTA band (scoped) ===== */
#wmx-cta-sayulita{
--brand:#ff6601; --brand-hover:#e25700;
--text:#ffffff; --muted:#e6f3fb;font-family:"Segoe UI", Roboto, Arial, sans-serif;
color:var(--text);background:linear-gradient(135deg, #0ea5e9, #0369a1);
border-radius:16px;
box-shadow:0 18px 40px rgba(0,0,0,.18);
overflow:hidden;
margin:16px 0;
}
#wmx-cta-sayulita .wmx-cta__inner{
display:grid;
grid-template-columns: 1.4fr 1fr;
gap:16px;
align-items:center;
padding:20px clamp(14px, 3vw, 28px);
}/* Copy */
#wmx-cta-sayulita .wmx-cta-title{
margin:0 0 6px;
font-weight:900;
font-size: clamp(20px, 3vw, 34px);
letter-spacing:.3px;
text-shadow:0 2px 2px rgba(0,0,0,.25);
}
#wmx-cta-sayulita .wmx-cta-subtitle{
margin:0;
font-size: clamp(14px, 1.8vw, 18px);
font-weight:700;
color:var(--muted);
}/* Actions: two buttons side-by-side (stack on mobile) */
#wmx-cta-sayulita .wmx-cta__actions{
display:grid;
grid-template-columns: 1fr 1fr;
gap:12px;
}/* Primary orange button */
#wmx-cta-sayulita .wmx-btn-orange{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
width:100%;
background:var(--brand); color:#fff !important; text-decoration:none;
padding:12px 16px; border-radius:12px; font-weight:900; font-size:14px;
text-transform:uppercase; letter-spacing:.35px; line-height:1;
box-shadow:0 14px 28px rgba(0,0,0,.22);
transition:background .25s ease, transform .05s ease, box-shadow .25s ease;
}
#wmx-cta-sayulita .wmx-btn-orange:hover{
background:var(--brand-hover);
transform:translateY(-1px);
box-shadow:0 18px 34px rgba(0,0,0,.26);
}/* Secondary outline button */
#wmx-cta-sayulita .wmx-btn-outline{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
width:100%;
background:transparent; color:#fff !important; text-decoration:none;
padding:12px 16px; border-radius:12px; font-weight:900; font-size:14px;
text-transform:uppercase; letter-spacing:.35px; line-height:1;
border:2px solid rgba(255,255,255,.7);
box-shadow:0 8px 20px rgba(0,0,0,.18);
transition:background .25s ease, transform .05s ease, box-shadow .25s ease, border-color .25s ease;
}
#wmx-cta-sayulita .wmx-btn-outline:hover{
background:rgba(255,255,255,.08);
border-color:#fff;
transform:translateY(-1px);
box-shadow:0 14px 28px rgba(0,0,0,.24);
}/* Icons */
#wmx-cta-sayulita .wmx-btn-orange i,
#wmx-cta-sayulita .wmx-btn-outline i{
display:inline-flex; align-items:center; justify-content:center;
font-size:1.1em; line-height:1;
}/* Responsive */
@media (max-width: 820px){
#wmx-cta-sayulita .wmx-cta__inner{
grid-template-columns:1fr;
gap:12px;
text-align:center;
}
#wmx-cta-sayulita .wmx-cta__actions{
grid-template-columns:1fr;
}
}/* Reduced motion */
@media (prefers-reduced-motion: reduce){
#wmx-cta-sayulita .wmx-btn-orange,
#wmx-cta-sayulita .wmx-btn-outline{ transition:none; }
}
</style>
<h1 style="font-family:'wildmex2';">
BLOG - Sharing the Lifestyle We Love
</h1>
Mountain Biking in the Sayulita Area
Sayulita and Punta Mita offer a variety of mountain biking experiences, with trails suitable for beginners and advanced riders. WildMex…
Read more
