/* Fonts loaded via + in HTML for non-blocking parallel fetch. */
:root{
--mx-paper:#F4EFE3;--mx-cal:#FAF7F0;--mx-ink:#0E1116;--mx-line:#ddd5c5;--mx-card:#FFFAF0;--mx-muted:#6a6860;
--mx-rojo:#D4231A;--mx-azul:#1B51C0;--mx-amarillo:#E8A800;--mx-verde:#0D7045;
--mx-rosa:#D5006A;--mx-naranja:#D9541E;--mx-morado:#5C2A78;--mx-adobe:#80402A;
--mx-stone:#E8DFD0;--mx-warm:#C8BDA8;
--mx-shadow-sm:0 1px 3px rgba(14,17,22,.07), 0 4px 12px rgba(14,17,22,.05);
--mx-shadow-md:0 2px 6px rgba(14,17,22,.07), 0 8px 24px rgba(14,17,22,.09);
--mx-shadow-lg:0 4px 12px rgba(14,17,22,.07), 0 16px 48px rgba(14,17,22,.12);
--mx-shadow-sm-solid:3px 3px 0 var(--mx-ink);
--mx-shadow-md-solid:4px 4px 0 var(--mx-ink);
--mx-shadow-yellow:4px 4px 0 var(--mx-amarillo);
--mx-shadow-rosa:4px 4px 0 var(--mx-rosa);
--mx-shadow-verde:4px 4px 0 var(--mx-verde);
--mx-border:1.5px solid var(--mx-ink);
--mx-border-thick:2.5px solid var(--mx-ink);
--mx-radius-sm:10px;--mx-radius-md:16px;--mx-radius-lg:20px;
--max:1200px;
--mx-font-cartel:'Fraunces',Georgia,'Times New Roman',serif;
--mx-font-calle:'Bebas Neue',Impact,'Arial Black',sans-serif;
--mx-font-text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--mx-bezier:cubic-bezier(.22,1,.36,1);
--sarape:linear-gradient(to right,
var(--mx-rojo) 0 16.66%,
var(--mx-amarillo) 16.66% 33.33%,
var(--mx-rosa) 33.33% 50%,
var(--mx-azul) 50% 66.66%,
var(--mx-verde) 66.66% 83.33%,
var(--mx-naranja) 83.33% 100%);
font-family:var(--mx-font-text);
color:var(--mx-ink);background:var(--mx-paper);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
#availability,#experiences,#main,#booking,#partner-form{scroll-margin-top:80px}
@media(max-width:920px){#availability,#experiences,#main,#booking,#partner-form{scroll-margin-top:64px}}
body{margin:0;background:var(--mx-paper);color:var(--mx-ink)}
body:before{
content:"";position:fixed;inset:0;pointer-events:none;
opacity:.035;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:180px 180px;
mix-blend-mode:multiply;z-index:0;
}
main{position:relative;z-index:1}
main:before{
content:"";display:block;height:4px;background:var(--sarape);
border-bottom:1.5px solid var(--mx-ink);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{line-height:1.65}
/* Header */
.site-header{
position:sticky;top:0;z-index:50;
display:flex;justify-content:space-between;align-items:center;
padding:14px clamp(18px,5vw,56px);
background:rgba(244,239,227,.94);backdrop-filter:blur(14px);
border-bottom:1.5px solid var(--mx-ink);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.brand-mark{
display:grid;place-items:center;width:38px;height:38px;
border:2.5px solid var(--mx-ink);background:var(--mx-rojo);color:#fff;
border-radius:50%;
font-family:var(--mx-font-cartel);font-size:18px;
box-shadow:3px 3px 0 var(--mx-amarillo);
}
.nav{display:flex;align-items:center;gap:20px;font-weight:700;font-size:14px;letter-spacing:.01em}
.nav a{padding:4px 0;transition:color .2s ease}
.nav a:hover{color:var(--mx-rojo)}
.nav-cta,.whatsapp{
background:var(--mx-verde);color:#fff;
border:var(--mx-border);
padding:9px 16px;border-radius:999px;
box-shadow:2px 2px 0 var(--mx-ink);
transition:transform .2s var(--mx-bezier),box-shadow .2s var(--mx-bezier);
}
.nav-cta:hover,.whatsapp:hover{
transform:translate(-1px,-1px);
box-shadow:3px 3px 0 var(--mx-ink);
}
.nav-toggle{display:none;background:transparent;border:0;font-size:24px;cursor:pointer}
.lang-toggle{
background:transparent;color:var(--mx-ink);border:2px solid var(--mx-ink);
border-radius:999px;padding:10px 14px;font-weight:800;font-size:13px;
letter-spacing:.06em;cursor:pointer;font-family:inherit;
min-height:44px;min-width:44px;
display:inline-flex;align-items:center;justify-content:center;
transition:background .2s ease;
}
.lang-toggle:hover,.lang-toggle:focus-visible{background:var(--mx-amarillo);outline:none}
/* Layout container */
.section,.hero{
max-width:var(--max);margin:auto;
padding:clamp(56px,6vw,88px) clamp(18px,5vw,56px);
}
.section.alt{background:var(--mx-cal);max-width:none;border-block:1.5px solid var(--mx-ink)}
.section.alt > *{max-width:var(--max);margin-inline:auto;padding-inline:0}
/* Hero — redesign for editorial impact */
.hero{
display:grid;grid-template-columns:1.1fr 1fr;gap:48px;
align-items:center;min-height:54vh;
}
.hero .stamp.eyebrow{
margin-bottom:16px;
}
.hero h1{
margin-bottom:18px;
/* slightly tighter for better rhythm */
max-width:580px;
}
.hero .lead{
margin-bottom:0;
}
/* Search bar in hero — make it the focal point */
.search-bar{
max-width:560px;
margin:24px 0 16px;
border:var(--mx-border-thick);
border-radius:var(--mx-radius-md);
background:#fff;
padding:7px 7px 7px 20px;
box-shadow:var(--mx-shadow-md);
display:flex;gap:6px;
}
.search-bar input[type="search"]{
flex:1;border:none;outline:none;
font:inherit;font-size:16px;background:transparent;padding:8px 4px;
font-family:var(--mx-font-text);
}
.search-bar input[type="search"]::-webkit-search-cancel-button{display:none}
.search-bar input[type="search"]:focus{outline:none}
.search-bar .button{
border-radius:var(--mx-radius-sm);padding:10px 18px;white-space:nowrap;
font-size:14px;
}
/* Poster (hero right side) — simplified */
.poster{
position:relative;border:var(--mx-border-thick);
border-radius:var(--mx-radius-lg);background:#fff;
box-shadow:var(--mx-shadow-md);overflow:hidden;
transition:transform .25s var(--mx-bezier),box-shadow .25s var(--mx-bezier);
}
.poster:hover{
transform:translateY(-3px);
box-shadow:var(--mx-shadow-lg);
}
.poster img{
width:100%;aspect-ratio:3/2;object-fit:cover;
filter:saturate(1.08) contrast(1.03);
}
.poster-body{
padding:20px 22px;
/* simplified — no stamp overlay needed if it's too busy */
}
.poster h2{
font-family:var(--mx-font-cartel);
font-size:clamp(18px,1.6vw,22px);
line-height:1.15;letter-spacing:-.015em;
margin:0 0 10px;
/* max 2 lines */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.poster .meta{margin-bottom:12px}
.poster .stamp{
position:absolute;top:14px;left:14px;z-index:2;
background:var(--mx-rosa);color:#fff;
}
/* No sarape on poster — keep it clean */
.poster:after{display:none}
/* Stamps */
.eyebrow,.stamp{
display:inline-flex;align-items:center;gap:8px;
margin:0 0 12px;
font-family:var(--mx-font-calle);font-size:13px;
letter-spacing:.1em;text-transform:uppercase;
}
.stamp{
padding:5px 10px;border:var(--mx-border);
background:var(--mx-amarillo);
transform:rotate(-2deg);
transition:transform .2s var(--mx-bezier);
}
.stamp.rosa{background:var(--mx-rosa);color:#fff}
.stamp.azul{background:var(--mx-azul);color:#fff}
.stamp.naranja{background:var(--mx-naranja);color:#fff}
.stamp.verde{background:var(--mx-verde);color:#fff}
.dark .stamp{background:var(--mx-amarillo);color:var(--mx-ink)}
.dark .stamp.azul{background:var(--mx-azul);color:#fff}
.dark .stamp.rosa{background:var(--mx-rosa);color:#fff}
.dark .stamp.naranja{background:var(--mx-naranja);color:#fff}
.dark .stamp.verde{background:var(--mx-verde);color:#fff}
/* Type */
h1,h2,h3,p{margin-top:0}
h1{
font-family:var(--mx-font-cartel);
font-size:clamp(42px,6vw,82px);
line-height:.92;letter-spacing:-.04em;margin-bottom:22px;
}
h2{
font-family:var(--mx-font-cartel);
font-size:clamp(30px,3.6vw,50px);
line-height:.96;letter-spacing:-.025em;
}
h3{
font-family:var(--mx-font-cartel);
font-size:clamp(20px,1.6vw,24px);line-height:1.2;letter-spacing:-.015em;
}
/* Tour pages: smaller, balanced h1 */
body.product .hero h1{font-size:clamp(36px,4.6vw,64px);line-height:1;letter-spacing:-.03em}
body.product .hero{min-height:auto}
.lead{
font-size:clamp(17px,1.7vw,21px);
max-width:640px;color:#3a3934;line-height:1.58;
}
.hero-actions,.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
/* Buttons */
.button{
display:inline-flex;align-items:center;justify-content:center;
min-height:48px;padding:0 22px;
border:var(--mx-border);border-radius:999px;
background:#fff;font-weight:700;
box-shadow:2px 2px 0 var(--mx-ink);
cursor:pointer;font-family:var(--mx-font-text);
transition:transform .2s var(--mx-bezier),box-shadow .2s var(--mx-bezier);
}
.button.primary{background:var(--mx-rojo);color:#fff}
.button.green{background:var(--mx-verde);color:#fff}
.button.blue{background:var(--mx-azul);color:#fff}
.button:hover,.button:focus-visible{
transform:translateY(-2px);
box-shadow:4px 4px 0 var(--mx-ink);
outline:none;
}
.button:active{transform:translateY(0);box-shadow:1px 1px 0 var(--mx-ink)}
.button.stacked{
flex-direction:column;align-items:center;justify-content:center;
padding:10px 24px;min-height:64px;line-height:1.1;gap:4px;
}
.button.stacked .powered-by{
font-size:10.5px;font-weight:600;letter-spacing:.04em;
text-transform:none;opacity:.85;
}
/* Pills — more subtle for trust row */
.trust-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}
.pill,.badge{
display:inline-flex;align-items:center;gap:5px;
background:rgba(255,255,255,.6);
padding:4px 10px;border-radius:999px;
font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
backdrop-filter:blur(2px);
}
/* Grids */
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){
.grid.cols-3{grid-template-columns:repeat(2,1fr)}
.grid.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
}
/* Cards — redesigned for visual hierarchy */
.card{
position:relative;background:var(--mx-card);
border:var(--mx-border-thick);border-radius:var(--mx-radius-lg);
box-shadow:var(--mx-shadow-sm);overflow:hidden;
display:flex;flex-direction:column;
transition:transform .25s var(--mx-bezier),box-shadow .25s var(--mx-bezier);
}
.card:hover{
transform:translateY(-4px);
box-shadow:var(--mx-shadow-lg);
}
.card-img{
width:100%;height:clamp(200px,26vw,260px);
object-fit:cover;
}
/* Card hover keeps lift+shadow only — image stays still so a 3xN grid doesn't ripple under the cursor. */
.card-body{
padding:18px 18px 20px;
flex:1;display:flex;flex-direction:column;
}
.meta{
font-family:ui-monospace,Menlo,monospace;
color:var(--mx-muted);font-size:12px;
text-transform:uppercase;letter-spacing:.04em;
}
/* Card meta row: price + duration side by side */
.card-meta-row{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin-bottom:6px;
}
.card .price{
font-family:var(--mx-font-cartel);
font-size:20px;font-weight:700;
letter-spacing:-.01em;color:var(--mx-ink);
}
.card-meta-row .meta{margin:0}
/* Category dot — replaces the big colored stamp */
.card-category{
display:flex;align-items:center;gap:6px;
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.05em;
color:var(--mx-muted);margin-bottom:6px;
}
.card-category::before{
content:"";width:7px;height:7px;border-radius:50%;flex:none;
}
.card[data-category*="loud"] .card-category::before{background:var(--mx-rojo)}
.card[data-category*="eat"] .card-category::before{background:var(--mx-naranja)}
.card[data-category*="water"] .card-category::before{background:var(--mx-verde)}
.card[data-category*="float"] .card-category::before{background:var(--mx-adobe)}
.card[data-category*="art"] .card-category::before{background:var(--mx-azul)}
.card[data-category*="walk"] .card-category::before{background:var(--mx-morado)}
/* Card title */
.card h3{
font-family:var(--mx-font-cartel);
font-size:clamp(17px,1.4vw,20px);
line-height:1.18;letter-spacing:-.01em;
margin:4px 0 8px;
/* max 2 lines */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Card description — always shown (2 lines clamped). Was previously hover-only on desktop, which forced users to hover-hunt across a 3xN grid to compare items. */
.card .card-desc{
font-size:13.5px;line-height:1.5;
color:var(--mx-muted);margin:0 0 14px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* CTA button in card — smaller, pill shape */
.card-cta{
margin-top:auto;padding:8px 16px;font-size:13px;font-weight:700;min-height:38px;
}
/* Stamp inside card — now a small variant for "featured" only */
.card .stamp{
position:absolute;top:10px;right:10px;z-index:3;
padding:3px 8px;font-size:10px;
/* override global stamp rotation for cleaner look on cards */
transform:rotate(-1deg);
}
/* Card category stripe (thin top accent instead of old serape) */
.card:not(.quiz-card):before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
}
.card[data-category*="loud"]:before{background:var(--mx-rojo)}
.card[data-category*="eat"]:before{background:var(--mx-naranja)}
.card[data-category*="water"]:before{background:var(--mx-verde)}
.card[data-category*="float"]:before{background:var(--mx-adobe)}
.card[data-category*="art"]:before{background:var(--mx-azul)}
.card[data-category*="walk"]:before{background:var(--mx-morado)}
.card.concierge-card:before{background:var(--mx-rosa)}
.card{cursor:pointer}
.card-cta{position:relative;z-index:2}
/* Legacy compat */
.card.bookable .stamp{display:none}
/* Split */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start}
/* Dark section */
.dark{background:var(--mx-ink);color:#fff;border-block:3px solid var(--mx-ink);max-width:none}
.dark .section{padding-top:64px;padding-bottom:64px}
.dark p{color:#e8dfd1}
.dark h2{color:#fff}
/* Quiz */
.quiz{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.quiz-card{
padding:24px;min-height:180px;text-align:left;
border:var(--mx-border-thick);border-radius:var(--mx-radius-lg);
box-shadow:var(--mx-shadow-sm-solid);
transition:transform .2s var(--mx-bezier),box-shadow .2s var(--mx-bezier);
}
.quiz-card:hover{
transform:translate(-1px,-1px);
box-shadow:5px 5px 0 var(--mx-ink);
}
.quiz-card:nth-child(1){background:var(--mx-naranja);color:#fff}
.quiz-card:nth-child(2){background:var(--mx-rosa);color:#fff}
.quiz-card:nth-child(3){background:var(--mx-verde);color:#fff}
.quiz-card:nth-child(4){background:var(--mx-azul);color:#fff}
@media(max-width:920px){.quiz{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.quiz{grid-template-columns:1fr}}
/* Ticket / Form */
.ticket{
background:#fff;border:2.5px dashed var(--mx-ink);
border-radius:var(--mx-radius-lg);padding:24px;
box-shadow:var(--mx-shadow-yellow);
}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wide{grid-column:1/-1}
label{
display:grid;gap:6px;font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.05em;
}
input,select,textarea{
width:100%;border:var(--mx-border);border-radius:var(--mx-radius-sm);
padding:12px;font:inherit;background:#fff;
font-family:var(--mx-font-text);
transition:border-color .2s ease,box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{
outline:none;border-color:var(--mx-rojo);
box-shadow:0 0 0 3px rgba(212,35,26,.12);
}
/* Flow (dark bg) */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.flow div{border:1.5px solid rgba(255,255,255,.25);border-radius:var(--mx-radius-md);padding:18px}
.flow strong{font-size:16px;display:inline-block;margin-bottom:4px}
/* Steps (light bg) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.steps div{border:var(--mx-border);border-radius:var(--mx-radius-md);padding:16px;background:#fff}
.steps strong{display:inline-block;font-size:16px;margin-bottom:4px}
@media(max-width:920px){.flow,.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow,.steps{grid-template-columns:1fr}}
/* Footer */
.site-footer{
display:flex;justify-content:space-between;gap:18px;
padding:36px clamp(18px,5vw,56px);
background:var(--mx-ink);color:#fff;
}
.footer-links{display:flex;flex-wrap:wrap;gap:14px}
/* Mobile sticky button */
.mobile-sticky{display:none;transition:transform .25s ease,opacity .2s ease}
.mobile-sticky.is-hidden{
transform:translateY(120%);
opacity:0;
pointer-events:none;
transition:transform .25s ease,opacity .2s ease;
}
/* Magic table */
.magic-table{
display:grid;grid-template-columns:1fr 1fr;
border:var(--mx-border-thick);box-shadow:var(--mx-shadow-sm);background:#fff;border-radius:var(--mx-radius-md);overflow:hidden;
}
.magic-table div{padding:18px 22px;border-bottom:1.5px solid var(--mx-ink)}
.magic-table div:nth-child(odd){border-right:1.5px solid var(--mx-ink);background:#FFE9CF}
.magic-table div:nth-child(even){background:#FFF8E8}
.magic-table div:last-child,.magic-table div:nth-last-child(2){border-bottom:none}
@media(max-width:640px){
.magic-table{grid-template-columns:1fr}
.magic-table div{border-right:none!important}
.magic-table div:nth-child(odd){background:#FFE9CF}
}
/* Form status */
.form-status{font-size:14px;text-transform:none;letter-spacing:0}
.form-status.error{color:var(--mx-rojo);font-weight:700}
.caption{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--mx-muted);margin-top:8px}
/* Page hero (tours.html) — editorial treatment */
.page-hero{max-width:980px;text-align:center;margin:auto;padding:clamp(52px,6vw,72px) 18px 36px}
.page-hero h1{max-width:700px;margin-inline:auto}
.page-hero .lead{margin-inline:auto;margin-bottom:24px}
/* Filter bar — pill style */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0 24px}
@media(max-width:640px){.filterbar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 4px 8px}
.filterbar::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto}}
.chip{
border:1.5px solid var(--mx-line);background:rgba(255,255,255,.5);
border-radius:999px;padding:8px 16px;
font-weight:600;font-size:13px;cursor:pointer;
backdrop-filter:blur(2px);
transition:transform .15s var(--mx-bezier),background .2s ease,border-color .2s ease;
}
.chip:hover{transform:translateY(-1px);border-color:var(--mx-ink);background:rgba(255,255,255,.8)}
.chip.active{background:var(--mx-ink);color:#fff;border-color:var(--mx-ink)}
/* Tour list — better spacing & visual rhythm */
.tour-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1080px){.tour-list{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:640px){.tour-list{grid-template-columns:1fr;gap:16px}}
/* Section header area (stamp + h2 + lead) */
.section-header{margin-bottom:28px}
.section-header .stamp{margin-bottom:10px}
.section-header h2{margin-bottom:8px}
.section-header .lead{margin-bottom:0}
/* Divider between sections — thin editorial line */
.section-divider{
max-width:var(--max);margin:0 auto;
padding:0 clamp(18px,5vw,56px);
}
.section-divider hr{
border:none;height:1.5px;
background:linear-gradient(to right,transparent,var(--mx-line),transparent);
}
/* Partner matrix */
.partner-matrix{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.partner-matrix div{border:var(--mx-border);background:#fff;padding:14px;border-radius:var(--mx-radius-sm)}
@media(max-width:520px){.partner-matrix{grid-template-columns:1fr}}
/* Tour detail */
.tour-detail{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.booking-panel{position:sticky;top:84px}
.product-head{max-width:1180px;margin:36px auto 16px;padding:0 20px}
.breadcrumbs{font-size:13px;color:var(--mx-muted);margin:0 0 12px}
.product-head h1{font-size:clamp(32px,4vw,54px);line-height:.98;letter-spacing:-.035em;max-width:980px;margin:0}
.product-gallery{max-width:1180px;margin:18px auto 22px;padding:0 20px;display:grid;grid-template-columns:130px 1fr;gap:18px}
.product-gallery__thumbs{display:grid;gap:10px;align-content:start}
.product-gallery__thumb{background:none;padding:0;display:block;width:100%;border:none;cursor:pointer;border-radius:14px;transition:transform .15s,box-shadow .15s}
.product-gallery__thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;border:var(--mx-border);border-radius:14px;background:#fff;box-shadow:var(--mx-shadow-sm);display:block;transition:filter .15s}
.product-gallery__thumb:hover img,.product-gallery__thumb:focus-visible img{filter:saturate(1.1) brightness(1.04)}
.product-gallery__thumb:focus-visible{outline:3px solid var(--mx-rojo);outline-offset:2px}
.product-gallery__thumb.is-active img{outline:3px solid var(--mx-rojo);outline-offset:2px;border-color:var(--mx-rojo)}
.product-gallery__main{position:relative;margin:0;border:var(--mx-border-thick);border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--mx-shadow-md)}
.product-gallery__main img{width:100%;height:100%;min-height:430px;max-height:620px;object-fit:cover;display:block;filter:saturate(1.04) contrast(1.02)}
.gallery-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:54px;border:0;border-radius:18px;background:var(--mx-rojo);color:#fff;font-size:26px;font-weight:900;box-shadow:var(--mx-shadow-md)}
.product-featurebar{max-width:1180px;margin:0 auto 18px;padding:0 20px 18px;display:flex;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--mx-line)}
.product-featurebar span{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--mx-ink);background:#fff;border:var(--mx-border);border-radius:999px;padding:9px 12px;font-size:13px}
.product-detail{align-items:start}
.product-detail .availability{margin-top:0;grid-column:auto;background:#fff}
.product-detail .availability__row{grid-template-columns:1fr;gap:8px}
.product-detail .option-grid{grid-template-columns:1fr}
.product-detail .availability__contact-grid{grid-template-columns:1fr}
.content-block{
background:#fff;border:var(--mx-border-thick);
border-radius:var(--mx-radius-lg);box-shadow:var(--mx-shadow-sm);
padding:24px 28px;margin-bottom:18px;
}
.content-block ul,.content-block ol{padding-left:22px;margin:10px 0}
.content-block li{margin:6px 0;line-height:1.58}
.content-block h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;line-height:1.1;margin-bottom:10px}
/* Mobile-only helper */
.mobile-only{display:none}
/* Responsive */
@media(max-width:1024px){
.hero{min-height:auto}
.product-gallery{grid-template-columns:1fr}.product-gallery__thumbs{grid-template-columns:repeat(5,1fr);order:2}.product-gallery__main img{min-height:320px}
}
@media(max-width:920px){
.nav{display:none}
.nav.open{
display:flex;position:absolute;top:70px;left:14px;right:14px;
flex-direction:column;background:var(--mx-paper);
border:var(--mx-border-thick);padding:18px;
box-shadow:var(--mx-shadow-md-solid);border-radius:var(--mx-radius-lg);
}
.nav-toggle{display:block}
.hero,.split,.tour-detail{grid-template-columns:1fr}
.form{grid-template-columns:1fr}
.booking-panel{position:static}
.site-footer{display:block;padding-bottom:88px}
.mobile-sticky{
display:flex;position:fixed;
left:12px;right:12px;
bottom:max(12px,env(safe-area-inset-bottom));
z-index:60;justify-content:center;align-items:center;
background:var(--mx-verde);color:#fff;
border:var(--mx-border-thick);box-shadow:4px 4px 0 var(--mx-ink);
border-radius:999px;min-height:52px;font-weight:800;
transition:transform .15s var(--mx-bezier);
}
.mobile-sticky:active{transform:translateY(1px)}
.mobile-only{display:block}
h1{font-size:clamp(34px,8vw,52px)}
}
@media(max-width:520px){
.hero,.section{padding:40px 16px}
.hero{gap:32px}
.ticket{padding:20px}
.content-block{padding:20px 22px}
h1{font-size:clamp(38px,10vw,56px)}
body.product .hero h1{font-size:clamp(34px,8.5vw,50px)}
.poster img{aspect-ratio:4/3}
/* Card image height on mobile — bigger impact */
.card-img{height:200px}
}
/* Papel picado divider */
.papel-picado{
position:relative;display:flex;height:40px;
background:var(--mx-paper);overflow:hidden;
}
.papel-picado:before{
content:"";position:absolute;top:0;left:0;right:0;height:2.5px;
background:var(--mx-ink);z-index:5;
}
.papel-picado span{
flex:1;
clip-path:polygon(0 0,100% 0,100% 65%,80% 100%,50% 65%,20% 100%,0 65%);
position:relative;
}
.papel-picado span:nth-child(8n+1){background:var(--mx-rojo)}
.papel-picado span:nth-child(8n+2){background:var(--mx-amarillo)}
.papel-picado span:nth-child(8n+3){background:var(--mx-rosa)}
.papel-picado span:nth-child(8n+4){background:var(--mx-azul)}
.papel-picado span:nth-child(8n+5){background:var(--mx-verde)}
.papel-picado span:nth-child(8n+6){background:var(--mx-naranja)}
.papel-picado span:nth-child(8n+7){background:var(--mx-morado)}
.papel-picado span:nth-child(8n){background:var(--mx-adobe)}
.papel-picado span:after{
content:"";position:absolute;top:10px;left:50%;
width:4px;height:4px;border-radius:50%;
background:var(--mx-paper);transform:translateX(-50%);
box-shadow:-12px 0 0 var(--mx-paper),12px 0 0 var(--mx-paper);
}
/* Image overlay for cards — subtle gradient from bottom of image */
.card-img-wrap{position:relative;overflow:hidden}
.card-img-wrap:after{
content:"";position:absolute;bottom:0;left:0;right:0;height:40px;
background:linear-gradient(to top,var(--mx-card),transparent);
pointer-events:none;
}
/* Concierge badge */
.badge.concierge-badge{
display:inline-block;margin:6px 0 8px;padding:4px 9px;
background:#f5e9f0;color:var(--mx-rosa);
border:1px dashed var(--mx-rosa);border-radius:8px;
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}
/* Helper note (e.g. "Need help? Ask Mexicaning") */
.helper-note{
font-size:13px;color:var(--mx-muted);margin-top:10px;
text-transform:none;letter-spacing:0;
}
.helper-note a{color:var(--mx-verde);font-weight:700;text-decoration:underline}
/* Concierge section visual divider */
.concierge-section{background:var(--mx-cal);border-block:1.5px dashed var(--mx-rosa);max-width:none}
.concierge-section > *{max-width:var(--max);margin-inline:auto}
/* Itinerary stops on partner experience pages */
.itinerary-block .itinerary-list{list-style:none;counter-reset:stop;margin:14px 0 0;padding:0}
.itinerary-block .itinerary-list > li{counter-increment:stop;position:relative;padding:14px 0 14px 44px;border-top:1px solid var(--mx-line)}
.itinerary-block .itinerary-list > li:first-child{border-top:0}
.itinerary-block .itinerary-list > li::before{content:counter(stop);position:absolute;left:0;top:14px;width:30px;height:30px;border-radius:50%;background:var(--mx-azul);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--mx-font-text)}
.itinerary-block .itinerary-list > li strong{display:block;font-family:var(--mx-font-cartel);font-size:16px;line-height:1.3}
.itinerary-block .itinerary-list > li .meta{font-size:12px;color:var(--mx-muted)}
.itinerary-block .itinerary-list > li p{margin:6px 0 0;font-size:14px;line-height:1.5}
/* Logistics / meeting + pickup */
.logistics-block ul{list-style:none;margin:8px 0 0;padding:0}
.logistics-block li{padding:10px 0;border-top:1px dashed var(--mx-line);font-size:14px;line-height:1.5}
.logistics-block li:first-child{border-top:0}
.logistics-block li strong{color:var(--mx-ink);margin-right:4px}
/* Host block on owned experience pages */
.host-block .host-row{display:grid;grid-template-columns:160px 1fr;gap:22px;align-items:start}
.host-block .host-photo{width:160px;height:160px;border-radius:var(--mx-radius-md);object-fit:cover;border:var(--mx-border);box-shadow:var(--mx-shadow-sm)}
.host-block .host-meta h2{margin:0 0 4px}
.host-block .host-meta .meta{color:var(--mx-muted);font-size:13px;margin:0 0 10px}
@media(max-width:640px){.host-block .host-row{grid-template-columns:96px 1fr;gap:14px}.host-block .host-photo{width:96px;height:96px}}
/* Owned route real review samples */
.reviews-section .review-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.reviews-section .review-list{grid-template-columns:1fr}}
.reviews-section .review-item{background:#fff;border:var(--mx-border);border-radius:var(--mx-radius-md);padding:16px 18px;box-shadow:var(--mx-shadow-sm)}
.reviews-section .review-item p{margin:6px 0 0;line-height:1.55;font-size:14px}
.reviews-section .review-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px;color:var(--mx-muted)}
.reviews-section .review-stars{color:var(--mx-amarillo);letter-spacing:.04em}
.reviews-section .review-author{font-weight:600;color:var(--mx-ink)}
.reviews-section .review-date{color:var(--mx-muted)}
/* Reviews grid on experience pages */
.reviews-section .lead{color:var(--mx-muted);margin-bottom:20px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
@media(max-width:920px){.reviews-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.reviews-grid{grid-template-columns:1fr}}
.review{
background:#fff;border:var(--mx-border);border-radius:var(--mx-radius-md);padding:20px;
box-shadow:var(--mx-shadow-sm);
transition:transform .2s var(--mx-bezier),box-shadow .2s var(--mx-bezier);
}
.review:hover{transform:translateY(-2px);box-shadow:var(--mx-shadow-md)}
.review h3{font-family:var(--mx-font-cartel);font-size:18px;line-height:1.25;margin:0 0 6px}
.review-stars{font-size:15px;letter-spacing:.04em;color:var(--mx-amarillo);margin:0 0 8px}
.review-stars-dim{color:var(--mx-line)}
.review p{margin:0 0 10px;line-height:1.55;font-size:14px}
.review-meta{font-size:12px;color:var(--mx-muted);margin:0}
/* FAQ details / summary */
.content-block details{
border-top:1.5px solid var(--mx-line);padding:16px 0;
}
.content-block details:first-of-type{border-top:none;padding-top:8px}
.content-block summary{
cursor:pointer;list-style:none;
font-family:var(--mx-font-cartel);font-size:18px;font-weight:700;line-height:1.3;
letter-spacing:-.01em;
display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
}
.content-block summary::-webkit-details-marker{display:none}
.content-block summary:after{
content:"+";flex:none;width:24px;height:24px;
display:grid;place-items:center;border:1.5px solid var(--mx-ink);
border-radius:50%;font-size:15px;font-weight:700;line-height:1;
background:var(--mx-amarillo);
transition:background .2s ease,color .2s ease;
}
.content-block details[open] summary:after{content:"−";background:var(--mx-rosa);color:#fff}
.content-block details p{margin:12px 0 0;line-height:1.6}
/* Booking panel rosa shadow + accent */
.ticket.booking-panel{box-shadow:var(--mx-shadow-rosa);border-color:var(--mx-rosa)}
.ticket.booking-panel .stamp{background:var(--mx-rosa);color:#fff}
/* Footer sarape strip */
.site-footer{position:relative}
.site-footer:before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:var(--sarape);
}
/* Extra stamp variants */
.stamp.rojo{background:var(--mx-rojo);color:#fff}
.stamp.morado{background:var(--mx-morado);color:#fff}
.stamp.adobe{background:var(--mx-adobe);color:#fff}
.dark .stamp.rojo{background:var(--mx-rojo);color:#fff}
.dark .stamp.morado{background:var(--mx-morado);color:#fff}
.dark .stamp.adobe{background:var(--mx-adobe);color:#fff}
/* Hero poster wrapped in an anchor (single CTA target) — link styling kept transparent so the existing poster:hover lift still drives feedback. */
.poster-link{display:block;color:inherit;text-decoration:none}
.poster-cta{
display:inline-flex;align-items:center;gap:6px;
margin-top:10px;font-weight:700;font-size:14px;
color:var(--mx-rojo);letter-spacing:.01em;
}
/* Disabled date chip — non-running days for owned routes (e.g. Lucha is Tue/Fri only). */
.date-chip[aria-disabled="true"]{opacity:.35;cursor:not-allowed;pointer-events:none}
/* Partner card language disclosure — only shown when html[lang="es"]. JS swaps the text in via applyLang(); CSS hides the element until the page is in ES. */
.partner-en-note{
display:none;margin:0 0 18px;padding:10px 14px;
background:rgba(245,233,240,.55);
border:1px dashed var(--mx-rosa);border-radius:var(--mx-radius-sm);
font-size:13px;color:var(--mx-ink);
}
html[lang="es"] .partner-en-note{display:block}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
*,*:before,*:after{transition:none!important}
html{scroll-behavior:auto}
}
/* === Unified flow: availability + confirm === */
.availability{grid-column:1/-1;background:var(--mx-paper);border:var(--mx-border-thick);border-radius:var(--mx-radius-lg);padding:24px 28px;box-shadow:var(--mx-shadow-sm);margin-top:20px}
.availability__lead{margin:6px 0 16px;font-size:14px;color:var(--mx-muted)}
.availability__row{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;margin:16px 0;padding:14px 0;border-top:2px dashed var(--mx-ink)}
.availability__row:first-of-type{border-top:none}
.availability__label{font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.availability__cta-row{margin-top:20px}
.availability__cta[aria-disabled="true"]{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}
.availability__disclosure{margin-top:16px;font-size:12px;color:var(--mx-muted);line-height:1.55}
.date-strip,.time-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.date-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;height:78px;padding:8px;border:var(--mx-border);background:#fff;border-radius:var(--mx-radius-sm);font-weight:800;cursor:pointer;transition:transform .15s var(--mx-bezier)}
.date-chip:hover{transform:translateY(-1px)}
.date-chip[aria-checked="true"]{background:var(--mx-amarillo);color:var(--mx-ink);border-color:var(--mx-rojo);box-shadow:inset 0 0 0 2px var(--mx-rojo)}
.time-chip{min-width:76px;padding:12px 14px;border:var(--mx-border);background:#fff;border-radius:999px;font-weight:800;cursor:pointer;transition:transform .15s var(--mx-bezier),background .15s ease}
.time-chip:hover{transform:translateY(-1px);background:var(--mx-cal)}
.time-chip[aria-checked="true"]{background:var(--mx-amarillo);border-color:var(--mx-rojo);box-shadow:inset 0 0 0 2px var(--mx-rojo)}
.date-chip-day{font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.date-chip-num{font-size:22px;line-height:1;font-family:var(--mx-font-cartel)}
.date-chip-mon{font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.pax-row{flex-wrap:wrap}
.pax-row > .pax-stepper{display:inline-flex}
.pax-stepper{align-items:center;gap:8px;border:var(--mx-border);background:#fff;padding:6px 10px;border-radius:999px;margin-right:10px}
.pax-btn{min-width:44px;min-height:44px;border:none;background:var(--mx-paper);border-radius:999px;font-weight:800;font-size:18px;cursor:pointer;transition:background .15s ease}
.pax-btn:hover{background:var(--mx-stone)}
.pax-count{min-width:18px;text-align:center;font-weight:800}
.pax-label{font-weight:700;font-size:13px;text-transform:uppercase;display:inline-flex;flex-direction:column;line-height:1.15}
.pax-hint{font-weight:500;font-size:11px;text-transform:none;color:var(--mx-muted);letter-spacing:.01em}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.option-card{text-align:left;border:var(--mx-border);background:#fff;border-radius:var(--mx-radius-md);padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font:inherit;transition:background .15s ease,box-shadow .15s ease}
.option-card:hover{background:var(--mx-cal)}
.option-card strong{font-size:14px}
.option-card span{font-size:12px;color:var(--mx-muted)}
.option-card.selected,.option-card[aria-checked="true"]{background:var(--mx-amarillo);border-color:var(--mx-rojo);box-shadow:inset 0 0 0 2px var(--mx-rojo)}
.quote-box{margin:10px 0 4px;padding:14px 16px;border:var(--mx-border);border-radius:var(--mx-radius-md);background:#fff;display:flex;flex-direction:column;gap:4px}
.quote-box strong{font-size:18px}
.quote-box span{font-size:13px;color:var(--mx-ink);font-weight:700}
.quote-box small{font-size:12px;color:var(--mx-muted);line-height:1.45}
@media(max-width:640px){
.availability__row{grid-template-columns:1fr}
.option-grid{grid-template-columns:1fr}
}
.no-results{text-align:center;padding:40px 20px;border:var(--mx-border-thick);border-radius:var(--mx-radius-lg);background:#fff;margin-top:20px}
.no-results h3{margin:6px 0}
@media(max-width:520px){
.search-bar{flex-direction:column;border-radius:var(--mx-radius-lg);padding:12px 14px;gap:8px}
.search-bar input[type="search"]{padding:12px 8px}
.search-bar .button{width:100%}
}
/* Availability contact disclosure (collapsed by default) */
.availability__contact{margin:14px 0;border:var(--mx-border);border-radius:var(--mx-radius-sm);padding:8px 14px;background:#fff}
.availability__contact summary{cursor:pointer;font-weight:700;list-style:none;padding:6px 0}
.availability__contact summary::-webkit-details-marker{display:none}
.availability__contact[open] summary{margin-bottom:6px}
.availability__label-inline{display:inline-block;background:var(--mx-paper);border:var(--mx-border);border-radius:999px;padding:2px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-right:8px;font-weight:700}
.availability__contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 0 4px}
.availability__contact-grid label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.availability__contact-grid input{padding:11px 12px;border:var(--mx-border);border-radius:var(--radius-sm);font:inherit;background:var(--mx-paper);font-family:var(--mx-font-text)}
.availability__contact-grid input:focus{outline:none;border-color:var(--mx-azul);box-shadow:0 0 0 3px rgba(27,81,192,.12);background:#fff}
@media(max-width:520px){.availability__contact-grid{grid-template-columns:1fr}}
.availability__cta{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 20px}
.availability__cta-main{font-size:16px;font-weight:800;letter-spacing:.01em}
.availability__cta-sub{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.85}
.availability__cta.shake{animation:mx-shake .35s}
@keyframes mx-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* === Accessibility additions === */
.skip-link{position:absolute;left:-999px;top:8px;background:var(--mx-amarillo);color:var(--mx-ink);border:var(--mx-border-thick);padding:10px 14px;border-radius:var(--mx-radius-sm);font-weight:700;z-index:9999}
.skip-link:focus{left:8px}
.pax-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}
.weather-note{background:var(--mx-amarillo);border:var(--mx-border);border-radius:var(--mx-radius-sm);padding:10px 14px;margin:10px 0;font-weight:700}