/* ZIKO Sitios v2 · base común de las demos.
   Cada demo define su propia paleta y tipografía en :root; esto solo pone el piso. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);text-wrap:balance;line-height:1.08}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--on-accent,#fff)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
html{scrollbar-color:color-mix(in oklab,var(--ink) 30%,transparent) var(--bg)}
.wrap{width:min(1200px,100% - 2*clamp(16px,4vw,48px));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Parallax: la foto vive dentro de un marco que recorta */
.px{overflow:hidden;position:relative}
.px>img{width:100%;height:100%;object-fit:cover;will-change:transform}

/* Carrusel por scroll nativo, sin librería */
.rail{padding-block:10px 40px;margin-block:-10px -40px;display:grid;grid-auto-flow:column;gap:var(--rail-gap,24px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}

/* Mask Hover Reveal (reconstrucción del componente de Framer): la imagen queda
   atenuada y un reflector que sigue al cursor revela el color. En dispositivos
   sin hover (touch) se muestra a color pleno. */
.zk-mask{position:relative;overflow:hidden}
@media (hover:hover){
  .zk-mask img{filter:grayscale(.5) brightness(.95);transition:filter .6s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
  .zk-mask:hover img{filter:none;transform:scale(1.06)}
}

/* Aviso de demo y toast */
.zk-demo{font-size:.78rem;opacity:.7;margin-top:18px}
.zk-toast{position:fixed;left:50%;bottom:24px;translate:-50% 220%;visibility:hidden;z-index:99;background:#111;color:#fff;padding:12px 18px;border-radius:12px;font:500 .9rem/1.3 var(--f-body);box-shadow:0 12px 30px -8px rgba(0,0,0,.4);transition:translate .5s cubic-bezier(.16,1,.3,1),visibility 0s .5s}
.zk-toast.on{translate:-50% 0;visibility:visible;transition:translate .5s cubic-bezier(.16,1,.3,1),visibility 0s}

/* Menú móvil · navbar a pantalla completa con reveal escalonado (estilo Framer "Fullscreen Navbars") */
.nav-toggle{display:none}
@media (max-width:860px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;position:relative;z-index:41}
  .nav-links{position:fixed;inset:0;min-height:100dvh;padding:96px 30px 44px;flex-direction:column;align-items:flex-start!important;justify-content:center;gap:4px!important;background:var(--bg);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s;z-index:40}
  .nav-links a{font-family:var(--f-display);font-size:clamp(1.9rem,8vw,2.7rem);line-height:1.16;opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
  .nav-open{overflow:hidden}
  .nav-open .nav-links{opacity:1;visibility:visible;transition:opacity .45s ease}
  .nav-open .nav-links a{opacity:1;transform:none}
  .nav-links a:nth-child(1){transition-delay:.10s}.nav-links a:nth-child(2){transition-delay:.16s}.nav-links a:nth-child(3){transition-delay:.22s}.nav-links a:nth-child(4){transition-delay:.28s}.nav-links a:nth-child(5){transition-delay:.34s}.nav-links a:nth-child(6){transition-delay:.40s}.nav-links a:nth-child(7){transition-delay:.46s}.nav-links a:nth-child(8){transition-delay:.52s}
  .nav-open .nav-toggle svg{opacity:0}
  .nav-toggle::before,.nav-toggle::after{content:"";position:absolute;left:11px;right:11px;height:2px;background:currentColor;border-radius:2px;opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s}
  .nav-open .nav-toggle::before{opacity:1;transform:rotate(45deg)}
  .nav-open .nav-toggle::after{opacity:1;transform:rotate(-45deg)}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ───────── Barra de planes de ZIKO Sitios ───────── */
body.zkp-on{padding-bottom:104px}
body.zkp-on .zk-toast{bottom:112px}
.zkp{position:fixed;z-index:90;left:50%;bottom:16px;translate:-50% 150%;display:flex;align-items:center;gap:14px;width:min(1080px,100% - 24px);padding:10px 10px 10px 12px;border-radius:22px;background:rgba(14,19,40,.86);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);color:#fff;font:500 14px/1.25 'Manrope',system-ui,sans-serif;box-shadow:0 24px 60px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);transition:translate .9s cubic-bezier(.16,1,.3,1)}
.zkp.zkp-in{translate:-50% 0}
.zkp-logo{flex:none;display:block;width:40px;height:40px;border-radius:50%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.zkp-logo:hover{transform:rotate(-12deg) scale(1.06)}
.zkp-logo svg{width:100%;height:100%}
.zkp-tabs{position:relative;display:flex;flex:none;padding:4px;border-radius:15px;background:rgba(255,255,255,.08)}
.zkp-tabs button{position:relative;z-index:1;display:grid;gap:1px;text-align:left;padding:7px 14px;border-radius:11px;color:rgba(255,255,255,.72);transition:color .3s}
.zkp-tabs button:hover{color:#fff}
.zkp-tabs button b{font-weight:700;font-size:14px}
.zkp-tabs button b i{font-style:normal;color:#f2a71b}
.zkp-tabs button span{font-size:11.5px;opacity:.85;font-variant-numeric:tabular-nums}
.zkp-tabs button.on{color:#141d47}
.zkp-pill{position:absolute;z-index:0;left:0;top:4px;bottom:4px;border-radius:11px;background:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.4);transition:transform .55s cubic-bezier(.16,1,.3,1),width .55s cubic-bezier(.16,1,.3,1)}
.zkp-scope{flex:1;min-width:0;font-size:13px;color:rgba(255,255,255,.86)}
.zkp-scope b{color:#fff}
.zkp-scope span{display:block;color:rgba(255,255,255,.6);font-size:12px;margin-top:2px}
.zkp-cta{flex:none;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;background:#f2a71b;color:#141d47;font-weight:800;text-decoration:none;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.zkp-cta:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(242,167,27,.8)}
.zkp-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s}
.zkp-cta:hover svg{transform:translateX(3px)}
.zkp :focus-visible{outline:2px solid #f2a71b;outline-offset:2px}
@media (max-width:900px){.zkp-scope{display:none}}
@media (max-width:560px){
  .zkp{gap:8px;padding:8px;bottom:10px;border-radius:18px}
  .zkp-logo{width:34px;height:34px}
  .zkp-tabs{flex:1}.zkp-tabs button{flex:1;padding:6px 6px;text-align:center}
  .zkp-tabs button b{font-size:12.5px}.zkp-tabs button span{font-size:10px}
  .zkp-cta{padding:11px 12px;font-size:0;gap:0}.zkp-cta svg{width:20px;height:20px}
  body.zkp-on{padding-bottom:84px}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

/* ───────── Bloque de reservas del plan Total (toma la paleta de cada demo) ───────── */
.zk-reserva{padding-block:clamp(64px,8vw,110px);background:color-mix(in oklab,var(--accent) 7%,var(--bg,#fff))}
.zk-reserva-in{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,60px);align-items:center}
.zk-reserva h2{font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:-.01em}
.zk-reserva p{margin-top:12px;opacity:.8;max-width:38ch}
.zk-reserva form{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:clamp(18px,3vw,28px);border-radius:20px;background:color-mix(in oklab,var(--ink) 4%,#fff);color:#1a1a1a;box-shadow:0 30px 60px -40px rgba(0,0,0,.5)}
.zk-reserva label span{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;margin-bottom:6px;opacity:.75}
.zk-reserva input,.zk-reserva select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.14);background:#fff;color:#1a1a1a}
.zk-reserva input:focus,.zk-reserva select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.zk-reserva button{grid-column:1/-1;padding:14px;border-radius:12px;background:var(--accent);color:var(--on-accent,#fff);font-weight:700;transition:transform .4s cubic-bezier(.16,1,.3,1),filter .3s}
.zk-reserva button:hover{transform:translateY(-2px);filter:brightness(1.08)}
@media (max-width:760px){.zk-reserva-in{grid-template-columns:1fr}.zk-reserva form{grid-template-columns:1fr}}
[data-block][hidden]{display:none!important}