/* SEZONIST · estilo común de la web (portada, /programa, /mexico, /cuentas). Inspirado en tesla.com: fotos a pantalla completa, blanco, tinta casi negra, botones negros o grises. El logo es SEZONIST en texto; las letras I S T llevan los colores del país (data-pais="co" | "mx" en ). */ :root{--ink:#171a20;--ink-2:#393c41;--muted:#5c5e62;--line:#d0d1d2;--bg:#fff;--btn:#171a20;--btn-hover:#393c41;--gray:#f4f4f4;--gray-hover:#e6e6e6; --font:"Inter",-apple-system,system-ui,Arial,sans-serif;--ease:cubic-bezier(.5,0,0,.75);color-scheme:light} *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{display:block} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* barra superior */ .top{position:fixed;inset:0 0 auto;z-index:30;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-left));transition:background .3s,color .3s} .top.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);color:var(--ink)} .top.onphoto{color:#fff} .mark{font-weight:600;font-size:15px;letter-spacing:.42em;padding:10px 12px;margin-left:-12px} .menu-btn{background:rgba(255,255,255,.14);border:0;border-radius:4px;padding:6px 14px;font-weight:500;font-size:14px;cursor:pointer;backdrop-filter:blur(6px);transition:background .25s} .top.solid .menu-btn{background:rgba(0,0,0,.05)} .menu-btn:hover{background:rgba(255,255,255,.28)} .top.solid .menu-btn:hover{background:rgba(0,0,0,.1)} /* menú lateral */ .scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s} .panel{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(320px,86vw);background:#fff;padding:72px 24px 24px;transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto} .menu-open .scrim{opacity:1;pointer-events:auto} .menu-open .panel{transform:none} .panel ul{list-style:none;margin:0;padding:0} .panel a{display:block;padding:10px 12px;border-radius:4px;font-weight:500;font-size:15px} .panel a:hover{background:rgba(0,0,0,.05)} .panel .sub{color:var(--muted);font-weight:400} .panel .sep{height:1px;background:#eee;margin:12px 0} .close{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;background:none;border-radius:4px;cursor:pointer;font-size:22px;line-height:1} .close:hover{background:rgba(0,0,0,.05)} .lock svg{width:12px;height:12px;margin-right:6px;vertical-align:-1px} /* secciones a pantalla completa */ .full{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;color:#fff} .full .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .full::before{content:"";position:absolute;inset:0 0 auto;height:46%;z-index:1;background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,0));pointer-events:none} .full::after{content:"";position:absolute;inset:auto 0 0;height:34%;z-index:1;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.42));pointer-events:none} .copy{position:absolute;z-index:2;left:0;right:0;top:calc(56px + 7vh);text-align:center;padding:0 20px} .eyebrow{display:inline-block;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.92;margin-bottom:6px} h1,h2{margin:0;font-weight:500;letter-spacing:-.01em;line-height:1.1;font-size:clamp(34px,5.2vw,56px);text-shadow:0 1px 18px rgba(0,0,0,.18)} .date{font-size:clamp(18px,2vw,22px);margin-top:6px} .fine{font-size:13px;opacity:.92;margin-top:6px} .fine b{font-weight:500} .ctas{position:absolute;z-index:2;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));display:flex;gap:16px;justify-content:center;padding:0 20px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;justify-content:center;min-width:220px;height:40px;padding:0 24px;border-radius:4px;font-weight:500;font-size:14px;transition:background .25s,color .25s} .btn.primary{background:rgba(23,26,32,.9);color:#fff} .btn.primary:hover{background:var(--btn)} .btn.light{background:rgba(244,244,244,.92);color:var(--ink)} .btn.light:hover{background:#fff} .btn.dark{background:rgba(23,26,32,.8);color:#fff} .btn.dark:hover{background:var(--ink)} .note{position:absolute;z-index:2;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));text-align:center;font-size:12px;opacity:.9;padding:0 20px} .note a{text-decoration:underline;text-underline-offset:3px} @media(max-width:600px){.btn{min-width:0;flex:1 1 100%}.ctas{bottom:calc(76px + env(safe-area-inset-bottom));gap:10px}} /* portada: dos ediciones que se pasan como en tesla.com */ .hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none} .hero .slide.on{opacity:1;pointer-events:auto} .hero .slide .bg{transform:scale(1.04);transition:transform 7s ease-out} .hero .slide.on .bg{transform:scale(1)} .dots{position:absolute;z-index:3;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:10px} .dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer} .dots button[aria-current="true"]{background:#fff} .hero .note{bottom:calc(36px + env(safe-area-inset-bottom))} .hero .ctas{bottom:calc(76px + env(safe-area-inset-bottom))} @media(max-width:600px){.hero .ctas{bottom:calc(96px + env(safe-area-inset-bottom))}} /* pie */ footer{padding:28px 20px 40px;text-align:center;font-size:12px;color:var(--muted)} footer nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin-bottom:10px} footer a:hover{color:var(--ink)} footer small{display:block;font-size:11px;margin-top:6px} @media (prefers-reduced-motion:reduce){.hero .slide,.hero .slide .bg,.panel,.scrim{transition:none}} /* secciones blancas (programa, precio) */ .page{padding:96px 20px 72px;max-width:1040px;margin:0 auto} .page h2{text-shadow:none;font-size:clamp(28px,3.6vw,40px);text-align:center} .page .lead{text-align:center;color:var(--ink-2);margin:10px auto 0;max-width:620px} .specs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 56px;margin:36px 0 8px;text-align:center} .specs b{display:block;font-size:clamp(24px,3vw,32px);font-weight:500} .specs span{font-size:13px;color:var(--muted)} .days{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)} .days li{display:grid;grid-template-columns:120px 1fr;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--line)} .days .d{font-size:13px;color:var(--muted);line-height:1.4}.days .d b{display:block;color:var(--ink);font-size:15px;font-weight:500} .days h3{margin:0;font-size:17px;font-weight:500} .days p{margin:2px 0 0;color:var(--ink-2)} .days .star{color:var(--ink);font-weight:600} @media(max-width:600px){.days li{grid-template-columns:1fr}} .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px} @media(max-width:760px){.cols{grid-template-columns:1fr;gap:24px}} .cols h3{font-size:15px;font-weight:600;margin:0 0 8px} .cols ul{margin:0;padding-left:18px;color:var(--ink-2)}.cols li{margin:4px 0} .terms{width:100%;border-collapse:collapse;margin-top:36px;font-size:15px} .terms th,.terms td{text-align:left;vertical-align:top;padding:14px 0;border-bottom:1px solid var(--line)} .terms th{width:34%;font-weight:500;color:var(--muted);padding-right:20px} .terms td b{font-weight:600} .center{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:36px} .center .btn.light{background:#f4f4f4}.center .btn.light:hover{background:#e8e8e8} @media(max-width:600px){.center .btn{flex:1 1 100%}} .host{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-top:40px} .host img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px} .host p{color:var(--ink-2)} @media(max-width:760px){.host{grid-template-columns:1fr}} /* logo: SEZONIST entero con los colores de la bandera del país (data-pais="co" | "mx" en ). Colombia: amarillo la mitad (S E Z O), azul (N I) y rojo (S T), como la bandera. México: verde (S E Z), blanco (O N) y rojo (I S T). Tonos vivos sobre fotos, apagados sobre blanco. */ .mark span{transition:color .6s ease} [data-pais="co"] .mark .l1,[data-pais="co"] .mark .l2,[data-pais="co"] .mark .l3,[data-pais="co"] .mark .l4{color:#d69e14} [data-pais="co"] .mark .l5,[data-pais="co"] .mark .l6{color:#34549e} [data-pais="co"] .mark .l7,[data-pais="co"] .mark .l8{color:#c23f37} [data-pais="mx"] .mark .l1,[data-pais="mx"] .mark .l2,[data-pais="mx"] .mark .l3{color:#2b7d52} [data-pais="mx"] .mark .l4,[data-pais="mx"] .mark .l5{color:#b5aea3} [data-pais="mx"] .mark .l6,[data-pais="mx"] .mark .l7,[data-pais="mx"] .mark .l8{color:#c23f37} .top.onphoto .mark{text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 14px rgba(0,0,0,.25)} [data-pais="co"] .top.onphoto .mark .l1,[data-pais="co"] .top.onphoto .mark .l2,[data-pais="co"] .top.onphoto .mark .l3,[data-pais="co"] .top.onphoto .mark .l4{color:#ffd23f} [data-pais="co"] .top.onphoto .mark .l5,[data-pais="co"] .top.onphoto .mark .l6{color:#8fb0ff} [data-pais="co"] .top.onphoto .mark .l7,[data-pais="co"] .top.onphoto .mark .l8{color:#ff6b61} [data-pais="mx"] .top.onphoto .mark .l1,[data-pais="mx"] .top.onphoto .mark .l2,[data-pais="mx"] .top.onphoto .mark .l3{color:#4fd08f} [data-pais="mx"] .top.onphoto .mark .l4,[data-pais="mx"] .top.onphoto .mark .l5{color:#fff} [data-pais="mx"] .top.onphoto .mark .l6,[data-pais="mx"] .top.onphoto .mark .l7,[data-pais="mx"] .top.onphoto .mark .l8{color:#ff6b61} /* derecha de la barra: idioma + menú */ .top .right{display:flex;gap:8px;align-items:center} .menu-btn.lang{display:inline-flex;align-items:center;letter-spacing:.06em} /* al bajar, cada sección entra entera (como diapositivas) */ html{scroll-snap-type:y mandatory} main>section,.trip>section,.trip>.flow{scroll-snap-align:start} /* la parte de texto es un solo bloque: dentro se baja libremente */ .flow>section{scroll-snap-align:none} footer{scroll-snap-align:end} /* diapositivas de ciudad: solo el nombre, sobre vídeo o foto */ .full video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ciudad: mismo tamaño y sitio que el título de portada; debajo, el restaurante o lo que hacemos allí */ .city .date{font-weight:500} .city .fine{max-width:560px;margin-left:auto;margin-right:auto} /* preguntas */ .faq{margin-top:32px;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line);padding:16px 0} .faq summary{cursor:pointer;font-weight:500;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--muted);font-weight:400} .faq details[open] summary::after{content:"−"} .faq p{margin:8px 0 0;color:var(--ink-2)} /* tres columnas (cenas) */ .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px} .cols3 h3{margin:0;font-size:18px;font-weight:500} .cols3 .d{font-size:13px;color:var(--muted);margin:2px 0 8px} .cols3 p{margin:0;color:var(--ink-2)} @media(max-width:760px){.cols3{grid-template-columns:1fr;gap:24px}} footer .credits{max-width:760px;margin:10px auto 0;font-size:11px;line-height:1.5} footer .credits a{text-decoration:underline;text-underline-offset:2px} /* ===== portada: puntos con barra de progreso (el activo se alarga y se llena en 8 s) ===== */ .dots button{position:relative;overflow:hidden;transition:width .35s var(--ease),background .35s} .dots button[aria-current="true"]{width:34px;border-radius:4px;background:rgba(255,255,255,.45)} .dots button i{position:absolute;inset:0 auto 0 0;width:0;background:#fff;border-radius:4px} .dots button[aria-current="true"] i{width:100%} .hero.auto .dots button[aria-current="true"] i{width:0;animation:dotfill 8s linear forwards} @keyframes dotfill{to{width:100%}} /* ===== secciones blancas: extras ===== */ .page.wide{max-width:1160px} .kicker{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin:44px 0 0} .small{font-size:13px;color:var(--muted);margin:16px 0 0} .glance{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;margin:18px 0 0;border-top:1px solid var(--line)} .glance>div{padding:16px 0;border-bottom:1px solid var(--line)} .glance dt{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase} .glance dd{margin:4px 0 0;font-size:16px} @media(max-width:760px){.glance{grid-template-columns:1fr 1fr}} @media(max-width:480px){.glance{grid-template-columns:1fr}} /* ===== el recorrido: barra con bolitas + ciudades con restaurantes ===== */ .route{list-style:none;margin:40px 0 8px;padding:0 0 4px;display:flex;justify-content:space-between;gap:8px;position:relative;overflow-x:auto;scrollbar-width:none} .route::before{content:"";position:absolute;left:24px;right:24px;top:6px;height:2px;background:var(--line)} .route li{position:relative;flex:1 0 88px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px} .route i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--ink);position:relative;z-index:1} .route b{font-size:14px;font-weight:600;margin-top:6px;white-space:nowrap} .route span{font-size:12px;color:var(--muted);white-space:nowrap} [data-pais="co"] .route li:nth-child(odd) i{border-color:#d69e14}[data-pais="co"] .route li:nth-child(3n+2) i{border-color:#34549e}[data-pais="co"] .route li:nth-child(3n) i{border-color:#c23f37} [data-pais="mx"] .route li:nth-child(1) i{border-color:#2b7d52}[data-pais="mx"] .route li:nth-child(2) i{border-color:#b5aea3}[data-pais="mx"] .route li:nth-child(3) i{border-color:#c23f37} .region{margin-top:56px} .rh{display:flex;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:24px} .rh h3{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.01em} .rh span{font-size:13px;color:var(--muted)} .stops{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px} @media(max-width:900px){.stops{grid-template-columns:1fr 1fr}} @media(max-width:560px){.stops{grid-template-columns:1fr}} .stop .ph{display:grid;gap:6px;margin-bottom:14px} .stop .ph.n2{grid-template-columns:1fr 1fr} .stop .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:#f1f1f1} .stop .ph.n2 img{aspect-ratio:3/4} .stop h4{margin:0;font-size:18px;font-weight:500} .stop .tag{margin:2px 0 8px;font-size:13px;color:var(--muted)} .stop .tag.star{color:#b3261e} .stop p{margin:0;color:var(--ink-2)} .stop.noimg{border-top:1px solid var(--line);padding-top:16px} /* ===== dónde dormimos ===== */ .stays{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)} .stays li{display:grid;grid-template-columns:1fr auto;gap:8px 32px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)} .stays h3{margin:0;font-size:17px;font-weight:500} .stays p{margin:2px 0 0;color:var(--ink-2)} .stays dl{display:flex;gap:28px;margin:0} .stays dt{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .stays dd{margin:2px 0 0;font-weight:500;white-space:nowrap} @media(max-width:600px){.stays li{grid-template-columns:1fr}} /* ===== formulario «me interesa» ===== */ .lead-form{max-width:640px;margin:32px auto 0;display:grid;gap:16px} .lead-form label{display:grid;gap:6px;font-size:13px;color:var(--muted)} .lead-form input:not([type=radio]):not([type=checkbox]),.lead-form select{font:inherit;font-size:16px;color:var(--ink);padding:12px;border:1px solid var(--line);border-radius:4px;background:#fff;width:100%} .lead-form input:focus,.lead-form select:focus{outline:2px solid var(--ink);outline-offset:1px} .f-phone{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:12px} .f-phone .f-code-other:not([hidden])~label{grid-column:1/-1} @media(max-width:520px){.f-phone{grid-template-columns:1fr}} .f-trip{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .f-trip legend{font-size:13px;color:var(--muted);margin-bottom:8px;padding:0} .pill{display:inline-flex!important;cursor:pointer} .pill input{position:absolute;opacity:0;pointer-events:none} .pill span{padding:9px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink)} .pill input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff} .pill input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px} .check{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:10px!important;color:var(--ink-2)!important;font-size:14px!important;cursor:pointer} .check input{margin-top:3px;width:18px;height:18px;accent-color:var(--ink)} .lead-form .btn{justify-self:start;min-width:220px;border:0;cursor:pointer} .lead-form .btn:disabled{opacity:.6;cursor:default} .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .msg{margin:0;font-size:15px} .msg.ok{color:#2e7d4f;font-weight:500}.msg.err{color:#b3261e} .msg a{text-decoration:underline} .lead-form [hidden]{display:none!important} /* menú por viaje (solo se ve el del viaje activo) */ .panel ul ul{padding:0} .panel li[hidden],.trip[hidden],[data-trip][hidden]{display:none!important} /* v8: ficha con vídeo pequeño, ciudad sobre foto clara, hoteles con foto cuadrada, frase del pie */ .stop .ph video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:#111;display:block} .stop .ph.n2 video{aspect-ratio:3/4} .stop .tag{color:var(--ink);font-weight:500} .city.dark .copy{color:var(--ink)} .city.dark h2{text-shadow:none} .city.dark::before,.city.dark::after{opacity:.15} .stays li{grid-template-columns:88px 1fr auto} .stays img{width:88px;height:88px;object-fit:cover;border-radius:4px} .stays .city-l{margin:0 0 2px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} @media(max-width:600px){.stays li{grid-template-columns:72px 1fr}.stays img{width:72px;height:72px}.stays dl{grid-column:1/-1}} footer .motto{font-size:clamp(20px,2.4vw,26px);color:var(--ink);font-weight:500;letter-spacing:-.01em;margin:8px 0 22px} /* v9 (27/09): portada con el país grande y «No Reservations» debajo; restaurante primero en la diapositiva; nombres de restaurante como en su logo, estrellas Michelin, premios en lista; hoja «Me interesa»; visado de México */ .hero h1 .t-sub,.hero h2 .t-sub{display:block;font-size:.42em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-top:10px} .mstar{width:1em;height:1em;display:inline-block} .stars{display:inline-flex;gap:.12em;color:#c8102e;vertical-align:middle} .city .copy.resto h2{display:flex;align-items:center;justify-content:center;gap:.35em} .city .copy.resto .stars{color:#fff;font-size:.55em;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))} .city .copy.resto .date{font-size:clamp(18px,2vw,22px)} .city .copy.resto .fine{font-size:13px;letter-spacing:.14em;text-transform:uppercase} /* letra de cada logo */ .word{display:inline-block;line-height:1} .w-pujol{font-weight:600;letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase} .w-sud{font-weight:400;letter-spacing:.22em;margin-right:-.22em} .w-casa{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:500;font-style:italic;letter-spacing:.01em} .stop h4.brand{display:flex;align-items:center;gap:10px;min-height:40px;font-size:22px} .stop h4.brand .logo{width:auto;display:block} .stop h4.brand .stars{font-size:17px} .stop .awards{list-style:none;margin:0 0 10px;padding:0;font-size:13px;color:var(--ink-2)} .stop .awards li{position:relative;padding-left:14px;margin:2px 0} .stop .awards li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#c8102e} /* ciudades del día a día: nombre pequeño, el protagonista es el restaurante */ .rh{border-bottom-color:var(--line);margin-bottom:20px} .rh h3{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} .region{margin-top:44px} /* hoja «Me interesa» */ .sheet{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;background:#fff;color:var(--ink);overflow-y:auto} .sheet::backdrop{background:rgba(0,0,0,.4)} .sheet[open]{animation:sheetin .35s var(--ease)} @keyframes sheetin{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}} .sheet-in{max-width:640px;margin:0 auto;padding:88px 20px 56px} .sheet h2{text-align:center;font-size:clamp(28px,3.6vw,40px);text-shadow:none} .sheet .lead{text-align:center;color:var(--ink-2);margin:10px auto 0} .sheet .close{position:fixed;top:14px;right:16px} .sheet-open{overflow:hidden} /* prefijo: solo bandera y número */ .f-phone{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)} @media(max-width:520px){.f-phone{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}} /* visado */ .visa{display:grid;gap:10px;margin-top:4px} .visa label{display:grid;gap:6px;font-size:13px;color:var(--muted)} .visa select{font:inherit;font-size:16px;color:var(--ink);padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:#fff;max-width:340px} .visa-out{display:block;padding:12px 14px;border-radius:4px;background:#eef6f0;color:var(--ink)} .visa-out[data-k="no"]{background:#fbeceb}.visa-out[data-k="evisa"]{background:#fdf5e4}.visa-out[data-k="unk"]{background:var(--gray)} .visa-src{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px} .city .copy.resto .stars{font-size:.62em;gap:.18em} .city:has(.copy.resto)::before{height:62%;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.18) 70%,rgba(0,0,0,0))} .stop h4.brand .stars{font-size:24px;gap:2px} .city .copy.resto .stars{font-size:.8em} /* estrella Michelin real (Commons): color rojo Michelin */ .stars{color:#d3072b} .mstar{width:.92em;height:1em} .city .copy.resto .stars{color:#e3102f;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))} /* v10 (27/09): itinerario por días — cada día dice qué incluye (traslado, vuelo, hotel, cena de chef) */ #mx-days .specs,#co-days .specs{margin:32px auto 8px;gap:12px 44px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:980px} .itin{list-style:none;margin:40px 0 0;padding:0} .day{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 40px;padding:32px 0;border-top:1px solid var(--line)} .day:last-child{border-bottom:1px solid var(--line)} .dh{position:sticky;top:72px;align-self:start;display:flex;flex-direction:column;gap:2px} .dn{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .dh b{font-size:20px;font-weight:500;letter-spacing:-.01em} .dc{font-size:14px;color:var(--ink-2)} [data-pais="mx"] .dn{color:#2b7d52}[data-pais="co"] .dn{color:#b8860b} .db h3{margin:0 0 12px;font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.01em} .lines{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px} .lines li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-2)} .ic{width:20px;height:20px;flex:0 0 20px;color:var(--ink);margin-top:1px} .meals{display:grid;gap:20px} .meal{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start;background:var(--gray);border-radius:6px;padding:16px} .meal.noimg{grid-template-columns:1fr} .meal .ph{display:grid;gap:6px}.meal .ph.n2{grid-template-columns:1fr 1fr} .meal .ph img,.meal .ph video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;background:#ddd} .meal .ph.n2 img,.meal .ph.n2 video{aspect-ratio:3/4} .meal .lbl{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .meal .lbl .ic{width:15px;height:15px;flex-basis:15px;color:var(--muted);margin:0} .meal h4{margin:0;font-size:22px;font-weight:500} .meal h4.brand{display:flex;align-items:center;gap:10px;min-height:44px} .meal h4.brand .logo{width:auto;display:block} .meal h4.brand .stars{font-size:24px;gap:2px} .meal .tag{margin:4px 0 8px;font-size:14px;font-weight:500;color:var(--ink)} .meal .awards{list-style:none;margin:0 0 10px;padding:0;font-size:13px;color:var(--ink-2)} .meal .awards li{position:relative;padding-left:14px;margin:3px 0} .meal .awards li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#d3072b} .meal p{margin:0;color:var(--ink-2)} @media(max-width:760px){.day{grid-template-columns:1fr;gap:12px}.dh{position:static;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 12px}.meal{grid-template-columns:1fr}} /* letras de logos de Colombia y ajustes de imagen */ .logo-leo{filter:brightness(.55)} .city .copy.resto .logo-leo{filter:brightness(0) invert(1)} .city .copy.resto .logo{height:clamp(56px,8vw,88px)!important} .w-carmen{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-style:italic;font-size:1.15em} .w-celele{font-weight:600;letter-spacing:.02em;text-transform:lowercase} .w-antonia{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:.04em;font-size:1.1em} @media(max-width:600px){#mx-days .specs,#co-days .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 8px}} /* v11 (27/09): marca SIN RESERVAS con los colores de la bandera; cena misteriosa con ruleta */ .mark .l4{margin-left:.42em} .mark span[class^="l"]{transition:color .6s ease} /* Colombia: SIN RE amarillo · SER azul · VAS rojo (2:1:1 como la bandera) */ [data-pais="co"] .mark .l1,[data-pais="co"] .mark .l2,[data-pais="co"] .mark .l3,[data-pais="co"] .mark .l4,[data-pais="co"] .mark .l5{color:#d69e14} [data-pais="co"] .mark .l6,[data-pais="co"] .mark .l7,[data-pais="co"] .mark .l8{color:#34549e} [data-pais="co"] .mark .l9,[data-pais="co"] .mark .l10,[data-pais="co"] .mark .l11{color:#c23f37} [data-pais="co"] .top.onphoto .mark .l1,[data-pais="co"] .top.onphoto .mark .l2,[data-pais="co"] .top.onphoto .mark .l3,[data-pais="co"] .top.onphoto .mark .l4,[data-pais="co"] .top.onphoto .mark .l5{color:#ffd23f} [data-pais="co"] .top.onphoto .mark .l6,[data-pais="co"] .top.onphoto .mark .l7,[data-pais="co"] .top.onphoto .mark .l8{color:#8fb0ff} [data-pais="co"] .top.onphoto .mark .l9,[data-pais="co"] .top.onphoto .mark .l10,[data-pais="co"] .top.onphoto .mark .l11{color:#ff6b61} /* México: SIN verde · RESER blanco · VAS rojo */ [data-pais="mx"] .mark .l1,[data-pais="mx"] .mark .l2,[data-pais="mx"] .mark .l3{color:#2b7d52} [data-pais="mx"] .mark .l4,[data-pais="mx"] .mark .l5,[data-pais="mx"] .mark .l6,[data-pais="mx"] .mark .l7,[data-pais="mx"] .mark .l8{color:#b5aea3} [data-pais="mx"] .mark .l9,[data-pais="mx"] .mark .l10,[data-pais="mx"] .mark .l11{color:#c23f37} [data-pais="mx"] .top.onphoto .mark .l1,[data-pais="mx"] .top.onphoto .mark .l2,[data-pais="mx"] .top.onphoto .mark .l3{color:#4fd08f} [data-pais="mx"] .top.onphoto .mark .l4,[data-pais="mx"] .top.onphoto .mark .l5,[data-pais="mx"] .top.onphoto .mark .l6,[data-pais="mx"] .top.onphoto .mark .l7,[data-pais="mx"] .top.onphoto .mark .l8{color:#fff} [data-pais="mx"] .top.onphoto .mark .l9,[data-pais="mx"] .top.onphoto .mark .l10,[data-pais="mx"] .top.onphoto .mark .l11{color:#ff6b61} /* cena misteriosa */ .meal.mystery{background:#171a20;color:#fff} .meal.mystery .lbl,.meal.mystery .lbl .ic{color:rgba(255,255,255,.6)} .meal.mystery p{color:rgba(255,255,255,.8)} .meal .q{display:block} .qbox{aspect-ratio:4/3;border-radius:4px;display:grid;place-items:center;font-size:clamp(90px,12vw,150px);font-weight:600;line-height:1;color:#fff; background:radial-gradient(circle at 50% 40%,#3a3f4a,#0d0f13 70%);animation:qpulse 2.4s ease-in-out infinite} @keyframes qpulse{50%{text-shadow:0 0 28px rgba(255,255,255,.45);transform:scale(1.015)}} .spin{height:64px;overflow:hidden;margin:10px 0 12px;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18); -webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)} .spin ul{list-style:none;margin:0;padding:0} .spin li{height:64px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:22px} .spin li small{flex-basis:100%;font-size:12px;color:rgba(255,255,255,.65);letter-spacing:.02em;margin-top:-14px} .spin .stars{font-size:22px;gap:2px} @media (prefers-reduced-motion:reduce){.qbox{animation:none}} /* v12: ciudades del viaje en la portada */ .hero .cities-l{margin:10px 0 0;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase} /* v14 (27/09): SIN RESERVAS escrito entero, como antes, pero más pequeño (Alex: en el móvil era demasiado grande; SR y emblemas descartados) */ .mark{font-size:13px;letter-spacing:.34em;white-space:nowrap} .mark .l4{margin-left:.34em} @media(max-width:600px){.mark{font-size:11px;letter-spacing:.26em;padding:10px 8px;margin-left:-8px}.mark .l4{margin-left:.3em}} @media(max-width:360px){.mark{font-size:10px;letter-spacing:.2em}} /* v15 (27/09): portada sin nombres de restaurantes; las ciudades van debajo del botón */ .hero .note.cities-l{margin:0;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;opacity:.95} /* logo por sílabas: SIN neutro · RE · SER · VAS con los tres colores de la bandera */ [data-pais] .mark .l1,[data-pais] .mark .l2,[data-pais] .mark .l3{color:var(--ink)} [data-pais] .top.onphoto .mark .l1,[data-pais] .top.onphoto .mark .l2,[data-pais] .top.onphoto .mark .l3{color:#fff} [data-pais="mx"] .mark .l4,[data-pais="mx"] .mark .l5{color:#2b7d52} [data-pais="mx"] .mark .l6,[data-pais="mx"] .mark .l7,[data-pais="mx"] .mark .l8{color:#b5aea3} [data-pais="mx"] .mark .l9,[data-pais="mx"] .mark .l10,[data-pais="mx"] .mark .l11{color:#c23f37} [data-pais="mx"] .top.onphoto .mark .l4,[data-pais="mx"] .top.onphoto .mark .l5{color:#4fd08f} [data-pais="mx"] .top.onphoto .mark .l6,[data-pais="mx"] .top.onphoto .mark .l7,[data-pais="mx"] .top.onphoto .mark .l8{color:#e9e4da} [data-pais="mx"] .top.onphoto .mark .l9,[data-pais="mx"] .top.onphoto .mark .l10,[data-pais="mx"] .top.onphoto .mark .l11{color:#ff6b61} [data-pais="co"] .mark .l4,[data-pais="co"] .mark .l5{color:#d69e14} [data-pais="co"] .mark .l6,[data-pais="co"] .mark .l7,[data-pais="co"] .mark .l8{color:#34549e} [data-pais="co"] .mark .l9,[data-pais="co"] .mark .l10,[data-pais="co"] .mark .l11{color:#c23f37} [data-pais="co"] .top.onphoto .mark .l4,[data-pais="co"] .top.onphoto .mark .l5{color:#ffd23f} [data-pais="co"] .top.onphoto .mark .l6,[data-pais="co"] .top.onphoto .mark .l7,[data-pais="co"] .top.onphoto .mark .l8{color:#8fb0ff} [data-pais="co"] .top.onphoto .mark .l9,[data-pais="co"] .top.onphoto .mark .l10,[data-pais="co"] .top.onphoto .mark .l11{color:#ff6b61} /* v16 (27/09) */ /* 1) título del viaje en UNA línea, también en el móvil (se ajusta el tamaño al ancho) */ .hero h1,.hero .slide h2{white-space:nowrap;font-size:clamp(22px,6.3vw,56px)} /* 2) pantallas completas a la medida exacta del móvil: dvh sigue a la barra de Safari (sin franja blanca) */ .full{height:100vh;height:100dvh;min-height:0} @supports not (height:100dvh){.full{height:100svh}} /* 3) logo: TODO en colores del país, nada de blanco ni neutro. Por sílabas SIN · RE · SER · VAS. Colombia (2:1:1 como la bandera): SIN RE amarillo · SER azul · VAS rojo. México: SIN verde · RE SER dorado del águila del escudo (el blanco no se ve) · VAS rojo. */ [data-pais="co"] .mark .l1,[data-pais="co"] .mark .l2,[data-pais="co"] .mark .l3,[data-pais="co"] .mark .l4,[data-pais="co"] .mark .l5{color:#d69e14} [data-pais="co"] .top.onphoto .mark .l1,[data-pais="co"] .top.onphoto .mark .l2,[data-pais="co"] .top.onphoto .mark .l3,[data-pais="co"] .top.onphoto .mark .l4,[data-pais="co"] .top.onphoto .mark .l5{color:#ffd23f} [data-pais="mx"] .mark .l1,[data-pais="mx"] .mark .l2,[data-pais="mx"] .mark .l3{color:#2b7d52} [data-pais="mx"] .top.onphoto .mark .l1,[data-pais="mx"] .top.onphoto .mark .l2,[data-pais="mx"] .top.onphoto .mark .l3{color:#4fd08f} [data-pais="mx"] .mark .l4,[data-pais="mx"] .mark .l5,[data-pais="mx"] .mark .l6,[data-pais="mx"] .mark .l7,[data-pais="mx"] .mark .l8{color:#a8741f} [data-pais="mx"] .top.onphoto .mark .l4,[data-pais="mx"] .top.onphoto .mark .l5,[data-pais="mx"] .top.onphoto .mark .l6,[data-pais="mx"] .top.onphoto .mark .l7,[data-pais="mx"] .top.onphoto .mark .l8{color:#f0b54a} /* v17 (27/09): «First edition» mucho más pequeño; barra de «baja» en la diapositiva del vídeo; título VIP del itinerario */ .hero .eyebrow{font-size:10px;letter-spacing:.2em;opacity:.8;margin-bottom:4px} .scrollcue{position:absolute;z-index:3;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.4)} .scrollcue i{position:relative;display:block;width:3px;height:56px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden} .scrollcue b{position:absolute;left:0;right:0;top:0;height:0;background:#fff;border-radius:3px} .scrollcue:not(.armed) b{height:30%;animation:cuebob 1.6s ease-in-out infinite} .scrollcue.armed b{animation:cuefill 6s linear forwards} @keyframes cuefill{to{height:100%}} @keyframes cuebob{0%{top:-30%}100%{top:100%}} @media (prefers-reduced-motion:reduce){.scrollcue b{animation:none!important;height:100%}} .vip-h{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap} .vip{display:inline-block;font-size:.42em;font-weight:600;letter-spacing:.2em;padding:.35em .6em .35em .8em;border:1.5px solid currentColor;border-radius:4px;line-height:1} [data-pais="mx"] .vip{color:#a8741f}[data-pais="co"] .vip{color:#b8860b} .page .kicker{margin:0 0 8px} /* v19 (27/09): marca NO RESERVATIONS por sílabas: NO RE · SER VA · TIONS (todo en colores del país, nada de blanco) */ .mark .l4{margin-left:0}.mark .l3{margin-left:.34em} @media(max-width:600px){.mark .l4{margin-left:0}.mark .l3{margin-left:.3em}} [data-pais="co"] .mark .l1,[data-pais="co"] .mark .l2,[data-pais="co"] .mark .l3,[data-pais="co"] .mark .l4{color:#d69e14} [data-pais="co"] .mark .l5,[data-pais="co"] .mark .l6,[data-pais="co"] .mark .l7,[data-pais="co"] .mark .l8,[data-pais="co"] .mark .l9{color:#34549e} [data-pais="co"] .mark .l10,[data-pais="co"] .mark .l11,[data-pais="co"] .mark .l12,[data-pais="co"] .mark .l13,[data-pais="co"] .mark .l14{color:#c23f37} [data-pais="co"] .top.onphoto .mark .l1,[data-pais="co"] .top.onphoto .mark .l2,[data-pais="co"] .top.onphoto .mark .l3,[data-pais="co"] .top.onphoto .mark .l4{color:#ffd23f} [data-pais="co"] .top.onphoto .mark .l5,[data-pais="co"] .top.onphoto .mark .l6,[data-pais="co"] .top.onphoto .mark .l7,[data-pais="co"] .top.onphoto .mark .l8,[data-pais="co"] .top.onphoto .mark .l9{color:#8fb0ff} [data-pais="co"] .top.onphoto .mark .l10,[data-pais="co"] .top.onphoto .mark .l11,[data-pais="co"] .top.onphoto .mark .l12,[data-pais="co"] .top.onphoto .mark .l13,[data-pais="co"] .top.onphoto .mark .l14{color:#ff6b61} [data-pais="mx"] .mark .l1,[data-pais="mx"] .mark .l2,[data-pais="mx"] .mark .l3,[data-pais="mx"] .mark .l4{color:#2b7d52} [data-pais="mx"] .mark .l5,[data-pais="mx"] .mark .l6,[data-pais="mx"] .mark .l7,[data-pais="mx"] .mark .l8,[data-pais="mx"] .mark .l9{color:#a8741f} [data-pais="mx"] .mark .l10,[data-pais="mx"] .mark .l11,[data-pais="mx"] .mark .l12,[data-pais="mx"] .mark .l13,[data-pais="mx"] .mark .l14{color:#c23f37} [data-pais="mx"] .top.onphoto .mark .l1,[data-pais="mx"] .top.onphoto .mark .l2,[data-pais="mx"] .top.onphoto .mark .l3,[data-pais="mx"] .top.onphoto .mark .l4{color:#4fd08f} [data-pais="mx"] .top.onphoto .mark .l5,[data-pais="mx"] .top.onphoto .mark .l6,[data-pais="mx"] .top.onphoto .mark .l7,[data-pais="mx"] .top.onphoto .mark .l8,[data-pais="mx"] .top.onphoto .mark .l9{color:#f0b54a} [data-pais="mx"] .top.onphoto .mark .l10,[data-pais="mx"] .top.onphoto .mark .l11,[data-pais="mx"] .top.onphoto .mark .l12,[data-pais="mx"] .top.onphoto .mark .l13,[data-pais="mx"] .top.onphoto .mark .l14{color:#ff6b61} /* v21 (27/09): botón blanco con el otro viaje al lado de «I'm interested», para que se vea que hay dos */ .btn.other .sm{display:none} @media(max-width:600px){.hero .ctas{flex-wrap:nowrap;gap:10px}.hero .ctas .btn{flex:1 1 50%;min-width:0;padding:0 12px}.btn.other .lg{display:none}.btn.other .sm{display:inline;margin-right:4px}} .btn.other .lg{margin-right:6px} /* v22 (27/09): fuera los puntos de abajo; el botón blanco del otro viaje se va «cargando» en 8 s y cambia de viaje */ .hero .dots{display:none} .hero .note{bottom:calc(22px + env(safe-area-inset-bottom))} .hero .ctas{bottom:calc(60px + env(safe-area-inset-bottom))} @media(max-width:600px){.hero .ctas{bottom:calc(64px + env(safe-area-inset-bottom))}} .btn.other{position:relative;overflow:hidden;isolation:isolate} .btn.other::before{content:"";position:absolute;inset:0 auto 0 0;width:0;background:rgba(23,26,32,.16);z-index:-1} .hero.auto .slide.on .btn.other::before{animation:dotfill 8s linear forwards} /* v23 (27/09): portada previa (/ y /es): una frase y los dos viajes sobre la foto del cochinillo */ .splash-page .mark span{color:#fff!important} .splash{position:relative;height:100vh;height:100dvh;overflow:hidden;color:#fff} .splash picture,.splash .bg{position:absolute;inset:0;width:100%;height:100%} .splash .bg{object-fit:cover;object-position:62% 55%} .splash::before{content:"";position:absolute;inset:0 0 auto;height:55%;z-index:1;background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,0))} .splash::after{content:"";position:absolute;inset:auto 0 0;height:50%;z-index:1;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7))} .sp-copy{position:absolute;z-index:2;left:0;right:0;top:calc(56px + 8vh);padding:0 24px;text-align:center} .sp-copy h1{white-space:normal;max-width:820px;margin:0 auto;font-size:clamp(26px,4.4vw,52px);font-weight:500;line-height:1.12;letter-spacing:-.015em;text-shadow:0 2px 20px rgba(0,0,0,.3)} .sp-trips{position:absolute;z-index:2;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));padding:0 16px;text-align:center} .sp-next{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.9} .sp-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .sp-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:260px;padding:12px 22px;border-radius:6px;background:rgba(255,255,255,.92);color:var(--ink);transition:background .25s,transform .25s} .sp-btn:hover{background:#fff;transform:translateY(-1px)} .sp-btn b{font-size:15px;font-weight:600} .sp-btn span{font-size:13px;color:var(--muted)} .sp-foot{margin:16px 0 0;font-size:11px;opacity:.7;letter-spacing:.06em} @media(max-width:600px){.sp-btns{flex-direction:column;gap:10px}.sp-btn{min-width:0;width:100%}.sp-copy{top:calc(56px + 6vh)}} .sp-btn{min-width:200px}.sp-btn b{font-size:17px} /* v26 (27/09): NO RESERVATIONS sin colores de país: blanco sobre foto, tinta sobre la barra blanca */ .mark span{color:var(--ink)!important} .top.onphoto .mark span{color:#fff!important} /* v27 (27/09): portada. Bajo el título, el texto de Alex; abajo, de arriba a abajo: botones (más arriba), ciudades y fechas */ .hero .manif{max-width:560px;margin:12px auto 0;font-size:clamp(14px,1.5vw,17px);line-height:1.45;text-shadow:0 1px 10px rgba(0,0,0,.35)} .hero .fine{margin-top:10px} .hero .ctas{bottom:calc(96px + env(safe-area-inset-bottom))} .hero .note.cities-l{bottom:calc(52px + env(safe-area-inset-bottom))} .hero .note.dates-l{bottom:calc(24px + env(safe-area-inset-bottom));margin:0;font-size:14px;font-weight:500;letter-spacing:.02em;opacity:.95} @media(max-width:600px){.hero .ctas{bottom:calc(100px + env(safe-area-inset-bottom))}.hero .manif{font-size:14px;padding:0 4px}} .hero::before{height:60%;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.25) 60%,rgba(0,0,0,0))} .hero .slide::after{content:"";position:absolute;inset:0 0 auto;height:62%;z-index:1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.28) 55%,rgba(0,0,0,0))}.hero .slide .copy,.hero .slide .ctas,.hero .slide .note{z-index:2} /* v29 (27/09): sin logo arriba; botón «Ver itinerario» en el vídeo; itinerario por ciudades sin fechas; tarjetas con foto cuadrada */ .top{justify-content:flex-end} /* botón «Ver itinerario» en la diapositiva del vídeo: se va cargando y baja solo */ .scrollcue.btn{flex-direction:row;gap:6px;height:44px;min-width:200px;padding:0 22px;font-size:14px;letter-spacing:0;text-transform:none;text-shadow:none;color:var(--ink);bottom:calc(40px + env(safe-area-inset-bottom));position:absolute;overflow:hidden;isolation:isolate} .scrollcue.btn::before{content:"";position:absolute;inset:0 auto 0 0;width:0;background:rgba(23,26,32,.16);z-index:-1} .scrollcue.btn.armed::before{animation:dotfill 6s linear forwards} .hero.auto .slide.on .btn.other::before{animation-duration:12s} /* itinerario */ .itin2{max-width:880px;margin:40px auto 0} .chap{border-top:2px solid var(--ink);padding-top:18px;margin-top:8px} .ch{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-bottom:6px} .ch h3{margin:0;font-size:clamp(24px,3vw,32px);font-weight:500;letter-spacing:-.01em} .ch .nts{font-size:13px;color:var(--muted)} .ch .htl{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);margin-left:auto} .ch .htl .ic{width:18px;height:18px;flex-basis:18px;margin:0} .leg{display:flex;align-items:center;justify-content:center;gap:10px;margin:28px 0;font-size:14px;color:var(--ink-2)} .leg::before,.leg::after{content:"";flex:1;height:1px;background:var(--line)} .leg .ic{width:18px;height:18px;flex-basis:18px;margin:0} .itin2 .idays{list-style:none;margin:0;padding:0} .itin2 .iday{padding:18px 0;border-top:1px solid #eee} .itin2 .iday:first-child{border-top:0} .itin2 .dn{margin:0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .itin2 .dt{margin:2px 0 10px;font-size:19px;font-weight:500} .itin2 .lines{margin:0 0 12px} .itin2 .meals{gap:12px} .itin2 .meal{grid-template-columns:150px minmax(0,1fr);gap:18px;padding:12px;align-items:center} .itin2 .meal.noimg{grid-template-columns:1fr;padding:16px} .itin2 .meal .ph img,.itin2 .meal .ph video{aspect-ratio:1/1} .itin2 .meal .lbl{margin:0 0 4px} .itin2 .meal h4{font-size:20px} .itin2 .meal h4.brand{min-height:36px} .itin2 .meal .tag{margin:2px 0 6px;font-size:13px} .itin2 .meal .awards{margin:0 0 6px;font-size:12px} .itin2 .meal p{font-size:14px} @media(max-width:600px){.itin2 .meal{grid-template-columns:104px minmax(0,1fr);gap:12px}.itin2 .meal h4{font-size:18px}.itin2 .meal h4.brand .logo{max-height:30px;width:auto}.ch .htl{margin-left:0;flex-basis:100%}} /* cena misteriosa: ? cuadrado a la mitad, nombre del restaurante grande, «Mystery restaurant» pequeño */ .itin2 .meal.mystery{grid-template-columns:1fr 1fr;align-items:center} .itin2 .meal.mystery .qbox{aspect-ratio:1/1;font-size:clamp(80px,11vw,130px)} .meal.mystery .mname{margin:0 0 2px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)} .meal.mystery .spin{height:74px;margin:6px 0 10px} .meal.mystery .spin li{height:74px;font-size:clamp(24px,3vw,32px);font-weight:500} .meal.mystery .spin .stars{font-size:26px} .meal.mystery .spin li small{margin-top:-18px} @media(max-width:600px){.itin2 .meal.mystery{grid-template-columns:1fr 1fr}.meal.mystery .spin li{font-size:20px}.meal.mystery .spin .stars{font-size:18px}} /* v30 (27/09): página About — minimalista, mucho blanco, muro de fotos sin textos (ref. hernanjuncopatron.com) */ .about-page .top{justify-content:space-between} .ab-home{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;padding:10px 0} .about{padding-top:56px} .ab-intro{max-width:1160px;margin:0 auto;padding:56px 20px 64px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start} .ab-portrait{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;position:sticky;top:80px} .ab-text .kicker{text-align:left;margin:0 0 10px} .ab-text h1{font-size:clamp(40px,5vw,64px);font-weight:500;letter-spacing:-.02em;text-shadow:none;white-space:normal} .ab-role{margin:6px 0 0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .ab-bio{margin-top:32px;font-family:"Newsreader",Georgia,serif;font-size:clamp(19px,1.7vw,22px);line-height:1.55;color:var(--ink)} .ab-bio p{margin:0 0 18px} .ab-cv{margin:32px 0 0;border-top:1px solid var(--line)} .ab-cv div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)} .ab-cv dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:2px} .ab-cv dd{margin:0;font-size:15px} .ab-cv a{text-decoration:underline;text-underline-offset:3px} .ab-wall{column-count:3;column-gap:10px;padding:0 10px;max-width:1600px;margin:0 auto} .ab-wall .w{margin:0 0 10px;break-inside:avoid} .ab-wall img,.ab-wall video{width:100%;height:auto;display:block;border-radius:2px;background:#f2f2f2} .ab-end{text-align:center;padding:96px 20px 40px} .ab-motto{font-family:"Newsreader",Georgia,serif;font-size:clamp(34px,5vw,60px);margin:0 0 40px} .ab-trips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px} .ab-trips .btn.light{background:#f0f0f0} @media(max-width:860px){.ab-intro{grid-template-columns:1fr;gap:28px;padding-top:28px}.ab-portrait{position:static;aspect-ratio:1/1}.ab-wall{column-count:2;column-gap:6px;padding:0 6px}.ab-wall .w{margin-bottom:6px}.ab-cv div{grid-template-columns:1fr;gap:2px}} /* v31: pie de foto bajo cada imagen del muro de About */ .ab-wall .w{margin-bottom:18px} .ab-wall figcaption{margin:7px 2px 0;font-size:12px;line-height:1.35;color:var(--muted);letter-spacing:.01em} @media(max-width:860px){.ab-wall .w{margin-bottom:14px}.ab-wall figcaption{font-size:11px}} /* muro por columnas en JS (orden de izquierda a derecha) */ .ab-wall{column-count:auto;display:flex;gap:10px;align-items:flex-start} .ab-wall .col{flex:1;min-width:0} @media(max-width:860px){.ab-wall{gap:6px}} .about-page main>section{scroll-snap-align:none} html.no-snap{scroll-snap-type:none}html.no-snap footer{scroll-snap-align:none} /* v32 (27/09): About con enlaces y estrellas Michelin reales; lista «dónde he comido»; pantalla «estás dentro» del formulario */ .ab-wall figcaption a{color:inherit} .ab-wall figcaption a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px} .ab-wall figcaption .mstar,.ab-bio .mstar{color:#d3072b;width:.9em;height:.95em;vertical-align:-.12em;margin:0 .05em} .ab-bio a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .ab-ph{text-align:left!important;margin:36px 0 0!important} .ab-places{margin-top:10px!important} .ab-places dd{color:var(--ink-2)} .done{max-width:520px;margin:32px auto 0;text-align:center;animation:sheetin .5s var(--ease)} .done img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;animation:wiggle 1.6s ease-in-out 2} .done h3{margin:22px 0 6px;font-size:clamp(24px,3vw,32px);font-weight:500;letter-spacing:-.01em} .done p{margin:0;color:var(--ink-2)} @keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}} @media (prefers-reduced-motion:reduce){.done img{animation:none}} /* v33: pies de foto con enlace normal (subrayado fino, sin flecha) */ .ab-wall figcaption a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(92,94,98,.45);text-underline-offset:2px} .ab-wall figcaption a:hover{text-decoration-color:currentColor} /* v35: pie del retrato (Disfrutar ★★★) */ .ab-pf{margin:0;position:sticky;top:80px} .ab-pf .ab-portrait{position:static} .ab-pf figcaption{margin-top:8px;font-size:12px;color:var(--muted)} .ab-pf figcaption a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(92,94,98,.45);text-underline-offset:2px} .ab-pf .mstar{color:#d3072b;width:.9em;height:.95em;vertical-align:-.12em;margin:0 .03em} @media(max-width:860px){.ab-pf{position:static}} /* v37: bio más pequeña para cuadrar con el retrato; título sobre el muro */ .ab-bio{font-size:clamp(16px,1.3vw,18px);line-height:1.55;margin-top:24px} .ab-bio p{margin:0 0 12px} .ab-text h1{font-size:clamp(36px,4.2vw,54px)} .ab-intro{padding-bottom:40px} .ab-moments{max-width:1160px;margin:0 auto 22px;padding:0 20px;font-family:"Newsreader",Georgia,serif;font-size:clamp(22px,2.4vw,30px);font-style:italic;color:var(--ink)} /* v38: retrato entero en el móvil (sin cortar el pelo); «Just a few moments…» centrada, pequeña y con la misma letra que la bio */ @media(max-width:860px){.ab-portrait{aspect-ratio:auto;height:auto;object-fit:contain}} .ab-moments{text-align:center;font-style:normal;font-size:clamp(16px,1.3vw,18px);color:var(--ink-2);margin:8px auto 24px} /* ===== Itinerario en rejilla (v40, 28/09/2026): una fila por día · de día · de noche ===== */ .w-humo{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.82em} .sched{max-width:1100px;margin:36px auto 0;text-align:left} .shead,.srow{display:grid;grid-template-columns:136px minmax(0,1fr) minmax(0,1.2fr);gap:28px} .shead{padding:0 0 10px;border-bottom:2px solid var(--ink);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .srows{list-style:none;margin:0;padding:0} .srow{padding:16px 0;border-bottom:1px solid var(--line);align-items:start} .sd p{margin:0} .sd .dn{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .sd .dd{margin-top:3px;font-size:16px;font-weight:500;color:var(--ink)} .sd .dc{margin-top:1px;font-size:14px;color:var(--ink-2)} .sday h4{margin:0 0 8px;font-size:16px;font-weight:600;color:var(--ink)} .sday .lines{margin:0;gap:6px;font-size:14.5px;line-height:1.45} .sday .lines .ic{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--ink)} .sday .tm{display:inline-block;margin-right:8px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .sday .lines li.xp{flex-wrap:wrap}.sday .lines li.xp>span{flex:1 1 0} .sday .lines li.xp .ph{flex-basis:100%;padding-left:27px} .sday .lines li.xp .ph img,.sday .lines li.xp .ph video{width:100%;max-width:240px;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block} .snight{display:grid;gap:10px} .nite{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;background:var(--gray);border-radius:6px;padding:12px} .nite.noimg{grid-template-columns:1fr} .nite .ph img,.nite .ph video{width:128px;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block;background:#ddd} .nite .lbl{margin:0 0 3px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .nite h4{margin:0;font-size:20px;font-weight:500;color:var(--ink)} .nite h4.brand{display:flex;align-items:center;gap:8px;min-height:32px} .nite h4.brand .logo{height:28px!important;width:auto;display:block} .nite h4.brand .stars{font-size:18px;gap:2px} .nite .tag{margin:2px 0 5px;font-size:13px;font-weight:500;color:var(--ink)} .nite p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)} .nite .awards{list-style:none;margin:6px 0 0;padding:0;font-size:12px;line-height:1.4;color:var(--ink-2)} .nite .awards li{position:relative;padding-left:12px;margin:2px 0} .nite .awards li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:#d3072b} .nite.mystery{grid-template-columns:64px minmax(0,1fr);align-items:center;background:#171a20} .nite.mystery .qbox{aspect-ratio:1/1;width:64px;font-size:40px} .nite.mystery .lbl{color:rgba(255,255,255,.6)} .nite.mystery .mname{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)} .nite.mystery .spin{height:40px;margin:4px 0 6px} .nite.mystery .spin li{height:40px;font-size:19px;font-weight:500;color:#fff} .nite.mystery .spin li small{display:none} .nite.mystery .spin .stars{font-size:16px} .nite.mystery p{color:rgba(255,255,255,.8)} @media(max-width:820px){ .shead{display:none} .srow{grid-template-columns:1fr;gap:10px;padding:18px 0} .sd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px} .sd .dd,.sd .dc{margin:0} .nite{grid-template-columns:96px minmax(0,1fr);gap:12px} .nite .ph img,.nite .ph video{width:96px} .nite.mystery{grid-template-columns:56px minmax(0,1fr)}.nite.mystery .qbox{width:56px;font-size:34px} } .nite h4.brand .logo[alt="El Cielo"]{height:46px!important} .nite h4.brand .logo[alt="Leo"]{height:30px!important} /* Dónde dormimos · Colombia: tarjetas grandes con la foto profesional del hotel (Alex, 28/09) */ #co-stay .stays,#mx-stay .stays{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;border-top:0} #co-stay .stays li,#mx-stay .stays li{display:block;padding:0;border:0} #co-stay .stays img,#mx-stay .stays img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block} #co-stay .stays li>div,#mx-stay .stays li>div{margin-top:12px} #co-stay .stays h3,#mx-stay .stays h3{font-size:19px} #co-stay .stays dl,#mx-stay .stays dl{margin-top:10px;gap:24px} #co-stay .stays dd,#mx-stay .stays dd{white-space:normal} /* cena con selección de fotos (28/09) y candidatos del misterioso con su premio en pequeño */ .nite.gal{grid-template-columns:1fr} .nite .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .nite .gal img,.nite .gal video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;background:#ddd} .nite.mystery .spin{height:52px} .nite.mystery .spin li{height:52px;flex-direction:column;align-items:flex-start;justify-content:center;flex-wrap:nowrap;gap:1px} .nite.mystery .spin li small{display:block;margin:0;font-size:11.5px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .nite .gal img[src*="antonia-chef"]{object-position:50% 12%} /* premios con logo (28/09) */ .nite .awards li.lg{padding-left:0;display:flex;align-items:center;gap:7px;margin:4px 0} .nite .awards li.lg::before{display:none} .nite .awards .aw{height:15px;width:auto;flex:none} .nite .awards img.aw[alt="The Best Chef Awards"]{height:17px} .nite .awards svg.aw{height:13px;width:13px;color:#d3072b} .nite .gal img[src*="co-humo"]{object-position:50% 45%} #mx-stay .stays img[src*="condesa"]{object-position:50% 60%} .lead-form .terms-ok span{font-size:13px;line-height:1.45} .lead-form .terms-ok a{color:inherit;text-decoration:underline} .lead-form button[disabled]{opacity:.45;cursor:not-allowed} /* ===== v44 (28/09 noche) ===== */ /* dónde dormimos: un hotel por fila, fotos grandes en diapositivas */ /* 28/09 (Alex): tamaño de antes (tarjetas en fila); solo más fotos en cada una */ .hs{position:relative} .hs-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:8px;overscroll-behavior-x:contain} .hs-track::-webkit-scrollbar{display:none} #co-stay .stays .hs-track img,#mx-stay .stays .hs-track img{flex:0 0 100%;width:100%;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start;border-radius:0} .hs-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#171a20;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18)} .hs-btn.prev{left:8px}.hs-btn.next{right:8px} .hs-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;pointer-events:none} .hs-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55)} .hs-dots i.on{background:#fff} @media(max-width:600px){.hs-btn{width:34px;height:34px;font-size:22px}} /* restaurante misterioso: logos en blanco */ .nite.mystery .spin .mlogo{height:26px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1)} .nite h4.brand .logo[alt="Antonia"]{height:22px!important} /* portada: ciudades y fechas encima de los botones */ .hero .note.cities-l{bottom:calc(128px + env(safe-area-inset-bottom))} .hero .note.dates-l{bottom:calc(102px + env(safe-area-inset-bottom))} .hero .ctas{bottom:calc(34px + env(safe-area-inset-bottom))} @media(max-width:600px){.hero .note.cities-l{bottom:calc(132px + env(safe-area-inset-bottom))}.hero .note.dates-l{bottom:calc(106px + env(safe-area-inset-bottom))}.hero .ctas{bottom:calc(40px + env(safe-area-inset-bottom))}} /* la barra del botón del otro viaje tarda lo mismo que el cambio automático: un minuto */ .hero.auto .dots button[aria-current="true"] i,.hero.auto .slide.on .btn.other::before{animation-duration:60s} .hs-track{border-radius:6px} /* v45 (28/09): intro del anfitrión encima del itinerario; premios con logo en el misterioso */ .host-intro{max-width:760px;margin:0 auto 18px;font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--ink)} .itin-h{margin-top:8px} .nite.mystery .spin li small .aw{height:11px;width:auto;margin-right:5px;vertical-align:-1px;filter:brightness(0) invert(1);opacity:.85} /* v46 (28/09): nota del anfitrión con foto, encima del itinerario */ .host-intro{display:none} .host-note{max-width:720px;margin:0 auto 34px;display:grid;grid-template-columns:72px 1fr;gap:6px 20px;align-items:center;text-align:left} .host-note img{grid-row:1/3;width:72px;height:72px;border-radius:50%;object-fit:cover} .host-note blockquote{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(20px,2.3vw,24px);line-height:1.5;color:var(--ink)} .host-note figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} @media(max-width:600px){.host-note{grid-template-columns:56px 1fr}.host-note img{width:56px;height:56px;grid-row:1}.host-note blockquote{grid-column:1/-1}} .itin-h{margin:0 0 6px} /* El Palmar: logo de Four Seasons */ .nite .fslogo{height:44px;width:auto;display:block;margin-top:8px} /* misterioso sencillo */ .nite.mystery h4{color:#fff;font-size:19px;margin:0 0 2px} /* v48 (28/09): El Palmar con fotos grandes, título pequeño y logo */ .nite.bar h4{font-size:16px;font-weight:500} .nite.bar .fslogo{height:40px;margin-top:6px} /* v49: ruleta solo con nombres */ .nite.mystery .spin{height:40px;margin:4px 0 6px} .nite.mystery .spin li{height:40px;font-size:20px;flex-direction:row;align-items:center} /* 29/09 (Alex): itinerario a la izquierda (con la cena y su hora), restaurante más a la derecha y fotos más grandes, tres en fila */ .sched{max-width:1160px} .shead,.srow{grid-template-columns:120px minmax(0,.8fr) minmax(0,1.6fr)} .nite.gal{padding:14px} .nite .gal{gap:8px} .nite .gal img,.nite .gal video{aspect-ratio:4/5} .nite .gal+.tx{margin-top:4px} .sday .lines li.cena{color:var(--ink)} @media(max-width:820px){.shead,.srow{grid-template-columns:1fr}.nite .gal{gap:5px}.nite.gal{padding:10px}} /* 29/09 (Alex, 2): misterioso del mismo formato que las otras cenas (recuadro grande arriba, nombre y premio debajo) */ .nite.mystery{grid-template-columns:1fr;padding:14px;align-items:stretch;gap:12px} .nite.mystery .qbox{width:auto;aspect-ratio:12/5;font-size:clamp(70px,9vw,120px)} .nite.mystery .spin{height:72px;margin:0 0 6px;-webkit-mask-image:none;mask-image:none} .nite.mystery .spin li{height:72px;font-size:21px;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;justify-content:flex-start;gap:6px 8px} .nite.mystery .spin li small .aw{display:inline-block;height:12px;width:auto;margin-right:6px;vertical-align:-2px} .nite.mystery .spin li small{display:block;margin:0;font-size:12.5px;letter-spacing:0;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;flex-basis:100%} .nite.bar h4{font-size:20px;font-weight:500} /* hoteles un poco más grandes, los tres en línea */ #co-stay,#mx-stay{max-width:1160px} #co-stay .stays,#mx-stay .stays{gap:24px} .nite.mystery>.tx,.nite.mystery .spin,.nite.mystery .spin ul{min-width:0;max-width:100%} .nite.mystery .spin li{min-width:0;max-width:100%}.nite.mystery .spin li small{min-width:0;width:100%} /* 29/09 (Alex, 3): logo de 50 Best delante del premio de Leonor Espinosa en la segunda página */ .city .copy img.aw50{position:static;inset:auto;display:inline-block;object-fit:contain;height:.95em;width:auto;margin:0 6px 0 2px;vertical-align:-.12em;filter:brightness(0) invert(1)} /* 29/09 (Alex, 4): logo de Four Seasons a la derecha de «El Palmar Rooftop», a tamaño legible */ .nite.bar .barhead{display:flex;align-items:center;justify-content:space-between;gap:16px} .nite.bar .barhead .fslogo{height:64px;width:auto;margin:0;flex:none} @media(max-width:820px){.nite.bar .barhead .fslogo{height:52px}} /* 29/09 (Alex, 5): logo delante del nombre, sin ciudad */ .nite.bar .barhead{justify-content:flex-start;gap:14px}.nite.bar .barhead .fslogo{height:56px} .nite.bar .barhead{gap:10px}.nite.bar .barhead .fslogo{height:36px}@media(max-width:820px){.nite.bar .barhead .fslogo{height:32px}}