/* munditrip landing: todo sale de ds/tokens.css y ds/munditrip.css */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--font-sans);overflow-x:hidden}
img{max-width:100%}
.only-dark{display:none}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .only-light{display:none}
 :root:not([data-theme="light"]) .only-dark{display:inline-block}
}
[data-theme="dark"] .only-light{display:none}
[data-theme="dark"] .only-dark{display:inline-block}
h1,h2{font-family:var(--font-display);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.02em}
h3{font:650 1.1rem/1.25 var(--font-sans);margin:0 0 var(--space-2)}
h1{font-size:clamp(2.6rem,7vw,4.6rem);margin-bottom:var(--space-4)}
h2{font-size:clamp(1.9rem,4.5vw,2.9rem);margin-bottom:var(--space-6)}
p{margin:0 0 var(--space-4)}
a{color:var(--link)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-4)}
.narrow{max-width:760px}.center{text-align:center}
.script{font:600 clamp(1.9rem,4vw,2.5rem)/1 var(--font-script);color:var(--link);margin:0 0 var(--space-2);display:inline-block}
.lead{font-size:1.15rem;color:var(--ink-muted);max-width:34em}
.center .lead{margin-inline:auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--space-2);top:var(--space-2);background:var(--surface);color:var(--ink);padding:var(--space-2) var(--space-3);z-index:9;border-radius:var(--radius-sm)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.site-header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo-link{text-decoration:none;color:var(--ink)}
.logo{display:inline-flex;align-items:center;gap:var(--space-2)}
.logo img{height:32px;width:auto}
.logotype{font:700 1.5rem/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.bar-end{display:flex;align-items:center;gap:var(--space-2)}
.lang-switch{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 var(--space-3);border-radius:var(--radius-pill);color:var(--ink);text-decoration:none;font:600 .9rem var(--font-sans);background:var(--surface-alt)}
.lang-switch:hover{background:var(--primary-soft)}
.lang-switch .ico.sm{margin:0;width:20px;height:20px}
.mt-btn{min-height:44px}
.mt-btn--sm{min-height:36px}
.mt-btn:hover{filter:brightness(1.08)}
.hero{padding:var(--space-8) 0 64px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.strips{display:flex;gap:10px;height:520px}
.strip{flex:1;border-radius:var(--radius-pill) var(--radius-pill) var(--radius-lg) var(--radius-lg);background-color:var(--primary-soft);background-image:var(--foto,none);background-size:cover;background-position:center}
.strip:nth-child(even){margin-top:36px}
.strip:nth-child(odd){margin-bottom:36px}
.waitlist{margin-top:var(--space-6);max-width:560px}
.form-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-end}
.field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.field.grow{flex:1 1 100%}
.field label{font:500 .9rem var(--font-sans)}
.opt{color:var(--ink-muted);font-weight:400}
.waitlist input[type=email],.waitlist select{font:400 1rem var(--font-sans);padding:0 var(--space-4);min-height:48px;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);width:100%}
.waitlist select{width:auto;min-width:170px}
.waitlist input::placeholder{color:var(--ink-muted);opacity:1}
.waitlist input[aria-invalid=true]{border-color:var(--danger);border-width:2px}
.form-error{color:var(--danger);font-weight:500;font-size:.92rem;min-height:1.3em;margin:var(--space-2) 0 0}
.fine{font-size:.85rem;color:var(--ink-muted);margin:var(--space-1) 0 0}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.section{padding:72px 0}
.tint{background:var(--surface-alt)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.steps li{background:var(--surface);box-shadow:var(--shadow-card);border-radius:var(--radius-md);padding:var(--space-6)}
.steps p{color:var(--ink-muted);margin:0}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--primary);color:var(--on-primary);font:700 1.2rem var(--font-sans);margin-bottom:var(--space-4)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.card{background:var(--surface);border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-card)}
.card p{color:var(--ink-muted);margin:0}
.ico{width:28px;height:28px;fill:none;stroke:var(--link);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--space-3)}
.ico.sm{width:18px;height:18px;margin:0 6px 0 0;stroke:currentColor;vertical-align:-3px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.ticks{list-style:none;padding:0;margin:var(--space-6) 0 0;display:grid;gap:var(--space-3)}
.ticks li{padding-left:34px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--primary)}
.ticks li::after{content:"";position:absolute;left:7px;top:6px;width:8px;height:5px;border-left:2px solid var(--on-primary);border-bottom:2px solid var(--on-primary);transform:rotate(-45deg)}
.phone-area{display:flex;justify-content:center;background:var(--accent-soft);border-radius:var(--radius-lg);padding:40px var(--space-4)}
.phone{width:240px;border-radius:32px;overflow:hidden;box-shadow:0 0 0 1.5px var(--line-strong),var(--shadow-fab);background:var(--bg);line-height:0}
.phone img{width:100%;height:auto;display:block}
.phone img.only-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone img.only-dark{display:block}}
[data-theme="dark"] .phone img.only-dark{display:block}
details{border-bottom:1px solid var(--line-strong);padding:var(--space-4) 0}
summary{font:650 1.1rem var(--font-sans);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-4)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--link)}
details[open] summary::after{content:"\2212"}
details p{margin:var(--space-3) 0 0;color:var(--ink-muted)}
.final{background:var(--primary);color:var(--on-primary);padding:80px 0}
.final .script{color:var(--on-primary)}
.final .lead,.final .fine,.final .field label,.final .opt{color:var(--on-primary)}
.final .waitlist{margin-inline:auto;text-align:left}
.final .form-error:not(:empty){background:var(--surface);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm)}
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:var(--space-8) 0}
.foot{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:center;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.site-footer .fine{flex-basis:100%;margin:0}
.thanks-page{min-height:100vh;display:grid;place-items:center}
.thanks{padding:var(--space-8) var(--space-4);max-width:600px;text-align:center}
.thanks .script{display:block;margin-top:var(--space-8)}
.thanks .lead{margin:0 auto var(--space-6)}
@media (max-width:860px){
 .hero-grid,.split{grid-template-columns:1fr}
 .strips{height:300px;order:-1}
 .steps,.cards{grid-template-columns:1fr}
 .section{padding:52px 0}
 .phone-area{padding:28px var(--space-4)}
}
@media (max-width:420px){
 .bar-end{gap:var(--space-1)}
 .lang-switch{padding:0 var(--space-2)}
 .bar .mt-btn--sm{padding-inline:var(--space-3);font-size:.85rem}
 .form-row .mt-btn,.waitlist select{width:100%}
 .field{width:100%}
 .logo img{height:26px}.logotype{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Banner animado (home): bloques + ruta. Estado final = estilo base; la animacion es solo CSS y corre una vez. */
.banner{position:relative;overflow:hidden;background:var(--bg);height:clamp(300px,31vw,440px);--bn-ease:cubic-bezier(.22,.7,.2,1)}
.banner-in{position:relative;z-index:1;height:100%;display:flex;align-items:flex-end;padding-bottom:clamp(28px,4.5vw,64px)}
.banner-copy{max-width:56%}
.bn-name{margin:0;font:700 clamp(3rem,7.2vw,6.4rem)/.9 var(--font-display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.bn-l{display:inline-block}
.bn-tag{margin:clamp(10px,1.6vw,20px) 0 0;font:400 clamp(.95rem,1.45vw,1.25rem)/1.4 var(--font-sans);color:var(--ink-muted)}
.bn-art{position:absolute;right:0;top:0;height:100%;width:62%;display:block}
.bn-b,.bn-ring{transform-box:fill-box;transform-origin:center}
.bn-b{animation:bn-block .8s var(--bn-ease) var(--d) backwards}
.bn-route{stroke-dasharray:100;animation:bn-draw 2.1s linear .9s backwards}
.bn-ring{animation:bn-pop .6s var(--bn-ease) var(--d) backwards}
.bn-l{animation:bn-rise .8s var(--bn-ease) calc(3.1s + var(--i)*.06s) backwards,bn-wave 10s ease-in-out calc(5.4s + var(--i)*.16s) infinite}
.bn-tag{animation:bn-fade .8s ease-out 4s backwards}
@keyframes bn-block{from{opacity:0;transform:translateY(14px) scale(.94)}}
@keyframes bn-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes bn-pop{0%{opacity:0;transform:scale(.55)}65%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes bn-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes bn-wave{0%,24%,100%{transform:translateY(0)}12%{transform:translateY(-2px)}}
@keyframes bn-fade{from{opacity:0;transform:translateY(6px)}}
@media (max-width:860px){
 .banner{height:auto}
 .banner-in{display:block;height:auto;width:100%;padding-bottom:var(--space-6)}
 .banner-copy{max-width:none}
 .bn-art{position:relative;display:block;width:100%;max-width:100%;height:clamp(240px,66vw,320px);margin:0}
 .banner-in{order:2}
 .banner{display:flex;flex-direction:column}
 .banner .bn-art{order:1}
 .bn-name{font-size:clamp(2.8rem,17vw,6.4rem)}
 .bn-tag{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
 .bn-b,.bn-route,.bn-ring,.bn-l,.bn-tag{animation:none}
 .bn-plane{display:none}
}

/* Color por seccion y tarjetas: solo mezclas (color-mix) de tokens del sistema. Se adaptan solos a Dia y Noche. */
:root{
 --mt-sand:color-mix(in srgb,var(--city-1-soft) 85%,var(--bg));
 --mt-sand-lt:color-mix(in srgb,var(--city-1-soft) 18%,var(--bg));
 --mt-rose:color-mix(in srgb,var(--city-2-soft) 80%,var(--bg));
 --mt-sage:color-mix(in srgb,var(--primary-soft) 55%,var(--bg));
 --mt-glow-amber:color-mix(in srgb,var(--city-1) 12%,transparent);
 --mt-glow-rose:color-mix(in srgb,var(--city-2) 9%,transparent);
 --mt-glow-sage:color-mix(in srgb,var(--primary) 9%,transparent);
 --mt-scrim:color-mix(in srgb,var(--bg) 90%,var(--city-1-soft));
 --mt-scrim-90:color-mix(in srgb,var(--mt-scrim) 92%,transparent);
 --mt-scrim-80:color-mix(in srgb,var(--mt-scrim) 82%,transparent);
 --mt-scrim-45:color-mix(in srgb,var(--mt-scrim) 45%,transparent);
 --fam-img:url(img/familia-dia.webp);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fam-img:url(img/familia-noche.webp)}}
[data-theme="dark"]{--fam-img:url(img/familia-noche.webp)}

.hero{background:radial-gradient(60% 80% at 100% 40%,var(--mt-glow-amber),transparent 70%),radial-gradient(50% 60% at 0% 100%,var(--mt-glow-rose),transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--mt-sand-lt) 100%)}
#como{background:radial-gradient(70% 80% at 0% 0%,var(--mt-glow-rose),transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg) 100%)}
#funciones{background:radial-gradient(60% 70% at 100% 0%,var(--mt-glow-amber),transparent 70%),linear-gradient(180deg,var(--mt-rose) 0%,var(--mt-sand) 100%)}
#faq{background:radial-gradient(60% 80% at 0% 100%,var(--mt-glow-sage),transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--mt-sage) 100%)}
.final{background:linear-gradient(135deg,var(--primary) 0%,color-mix(in srgb,var(--primary) 82%,var(--city-2)) 100%)}
.site-footer{background:linear-gradient(180deg,var(--mt-sand) 0%,var(--surface) 100%)}

/* Tono por item: --tone (texto/icono), --tone-soft (fondo suave). Pares city-N sobre city-N-soft, como pide el sistema. */
.steps li:nth-child(1),.cards .card:nth-child(1),.cards .card:nth-child(5){--tone:var(--city-1);--tone-soft:var(--city-1-soft)}
.steps li:nth-child(2),.cards .card:nth-child(2),.cards .card:nth-child(4){--tone:var(--city-2);--tone-soft:var(--city-2-soft)}
.steps li:nth-child(3),.cards .card:nth-child(3),.cards .card:nth-child(6){--tone:var(--link);--tone-soft:var(--primary-soft)}
.steps li,.card{border-top:3px solid var(--tone);background:linear-gradient(180deg,color-mix(in srgb,var(--tone-soft) 85%,var(--surface)) 0%,var(--surface) 70%)}
.steps .num{background:var(--tone);color:var(--surface)}
.steps li:nth-child(3) .num{background:var(--primary);color:var(--on-primary)}
.card .ico{box-sizing:content-box;width:26px;height:26px;padding:11px;border-radius:14px;background:var(--tone-soft);stroke:var(--tone);margin-bottom:var(--space-4)}
.card h3,.steps h3{color:var(--ink)}

/* Familias y grupos: foto de fondo (Dia: calle al atardecer; Noche: mesa de mercado) con velo calido para que el texto se lea */
#grupos{position:relative;background:linear-gradient(90deg,var(--mt-scrim-90) 0%,var(--mt-scrim-80) 40%,var(--mt-scrim-45) 100%),var(--fam-img) center/cover no-repeat,var(--mt-sand)}
#grupos .lead,#grupos .ticks li{color:var(--ink)}
#grupos .phone-area{background:none;padding:var(--space-6) var(--space-4)}
@media (max-width:860px){
 #grupos{background:linear-gradient(180deg,var(--mt-scrim-90) 0%,var(--mt-scrim-90) 45%,var(--mt-scrim-45) 100%),var(--fam-img) 62% center/cover no-repeat,var(--mt-sand)}
}
.final .waitlist input[type=email],.final .waitlist select{border-color:var(--on-primary)}
@media (max-width:860px){
 .hero{background:radial-gradient(90% 40% at 50% 0%,var(--mt-glow-amber),transparent 75%),linear-gradient(180deg,var(--bg) 0%,var(--mt-sand-lt) 100%)}
}
#faq details p{color:var(--ink)}
