/*
  Kikoua. Las paginas de estado (404, 403, tienda en pausa, mantenimiento):
  el CSS de Kikoua 404.html y Kikoua Mantenimiento.html, que es el mismo.
  Y el aviso de articulo no disponible, dentro del layout.
*/
.state{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;background:linear-gradient(160deg,var(--sky),var(--lilac) 55%,var(--pink))}
.state>.wrap{width:100%}
.state-top{gap:24px;display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:28px}
.state-top .logo img{height:36px;width:auto}
.state-top>a:not(.logo){font-size:14px;font-weight:500}
.state-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:20px;padding-bottom:60px}
.state .eyebrow{color:var(--ink)}
.state h1{font-weight:300;font-size:clamp(36px,5vw,64px);letter-spacing:-.03em;line-height:1.05;margin-top:12px;text-wrap:balance}
.state h1 b{font-weight:500}
.state .raya{margin:24px 0 0;width:56px;height:3px}
.state p{margin-top:20px;font-size:17px;max-width:460px}
.state .btns{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.state .big{font-weight:300;font-size:clamp(120px,18vw,240px);line-height:.9;letter-spacing:-.06em;color:#fff;text-align:center;position:relative}
.state .big img{width:46%;max-width:280px;position:absolute;left:50%;top:50%;transform:translate(-50%,-38%)}
.state .art{display:flex;justify-content:center}
.state .art img{width:min(360px,80%)}
.q-search{display:flex;align-items:center;max-width:460px;height:52px;margin-top:28px;background:#fff;border-radius:999px;padding:4px;box-shadow:var(--shadow-1)}
.q-search input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:14px;padding:0 18px;background:transparent}
.q-search button{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;border:0;cursor:pointer}
.q-search button .ico{width:18px;height:18px}
.state-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;padding-bottom:24px;font-size:13px;border-top:1px solid rgba(35,31,32,.1)}
.state-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.eta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.7);font-size:13px;font-weight:600}
.eta .ico{width:16px;height:16px;color:var(--magenta-ink)}
.no-disponible{text-align:center;padding:72px 0 96px;max-width:620px}
.no-disponible img{width:170px;height:auto;display:block;margin:0 auto 10px}
.no-disponible h1{font-weight:300;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em}
.no-disponible p{margin-top:12px;color:var(--ink-2)}
.no-disponible .btns{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}
@media (max-width:860px){.state-main{grid-template-columns:1fr;text-align:left}.state .big{order:-1;font-size:140px}}