/*
Theme Name: Saqbech Mantenimiento Premium
Theme URI: https://saqbech.com/
Author: Saqbech.com
Description: Portada premium temporal de mantenimiento para Saqbech.com.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: saqbech-mantenimiento
*/

:root{
  --bg:#071510;
  --bg2:#0b2119;
  --cream:#f4efe5;
  --muted:#9fa99f;
  --gold:#c9a86a;
  --gold-soft:#e0c896;
  --line:rgba(224,200,150,.22);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{
  min-height:100vh;
  color:var(--cream);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.maintenance-page{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(36,91,67,.24), transparent 33%),
    radial-gradient(circle at 12% 10%, rgba(201,168,106,.07), transparent 28%),
    radial-gradient(circle at 87% 88%, rgba(30,90,64,.12), transparent 29%),
    linear-gradient(145deg,#06120e 0%,#081913 48%,#06130f 100%);
}

.maintenance-page:before,
.maintenance-page:after{
  content:"";
  position:absolute;
  inset:22px;
  border:1px solid rgba(224,200,150,.09);
  pointer-events:none;
  z-index:2;
}
.maintenance-page:after{
  inset:31px;
  border-color:rgba(224,200,150,.025);
}

.ambient{position:absolute;border-radius:999px;filter:blur(1px);pointer-events:none;z-index:-2}
.ambient-one{width:720px;height:720px;left:-410px;top:-360px;background:radial-gradient(circle,rgba(201,168,106,.08),transparent 68%)}
.ambient-two{width:800px;height:800px;right:-430px;bottom:-470px;background:radial-gradient(circle,rgba(47,113,83,.12),transparent 70%)}

.grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.065;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.masthead,.footer{
  width:min(1380px,calc(100% - 96px));
  margin:0 auto;
  position:relative;
  z-index:3;
}

.masthead{
  padding:52px 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{display:flex;align-items:center;min-height:46px}
.wordmark{
  font-size:15px;
  font-weight:750;
  letter-spacing:.24em;
  line-height:1;
}
.wordmark span{color:var(--gold);font-weight:500}
.custom-logo{display:block;max-height:54px;width:auto;max-width:300px;object-fit:contain}

.status{
  display:flex;align-items:center;gap:11px;
  color:#c6cec7;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
}
.status-dot{
  width:6px;height:6px;border-radius:999px;background:var(--gold-soft);
  box-shadow:0 0 0 5px rgba(201,168,106,.08),0 0 18px rgba(201,168,106,.32);
  animation:pulse 2.8s ease-in-out infinite;
}

.hero{
  position:relative;
  z-index:3;
  width:min(1050px,calc(100% - 64px));
  margin:auto;
  padding:70px 0 90px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.ornament{
  height:20px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:30px;
  color:var(--gold);
  opacity:.76;
}
.ornament span{width:44px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.ornament span:last-child{transform:scaleX(-1)}
.ornament i{width:4px;height:4px;border:1px solid currentColor;transform:rotate(45deg)}
.ornament b{width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg);box-shadow:0 0 16px rgba(201,168,106,.25)}

.seal{
  width:116px;height:116px;
  margin-bottom:34px;
  color:var(--gold-soft);
  display:grid;place-items:center;
  filter:drop-shadow(0 16px 45px rgba(0,0,0,.22));
}
.seal svg{width:100%;height:100%;animation:float 7s ease-in-out infinite}

.kicker{
  margin:0 0 18px;
  color:var(--gold-soft);
  font-size:10px;
  font-weight:700;
  letter-spacing:.4em;
}

.hero h1{
  margin:0;
  max-width:980px;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(3.9rem,8vw,8.8rem);
  line-height:.88;
  letter-spacing:-.058em;
  text-wrap:balance;
  text-shadow:0 12px 50px rgba(0,0,0,.16);
}

.subtitle{
  margin:30px 0 0;
  color:#aeb8b0;
  font-size:clamp(.9rem,1.3vw,1.05rem);
  font-weight:450;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.divider{margin-top:42px;display:flex;align-items:center;gap:12px;color:var(--gold);opacity:.5}
.divider span{display:block;width:50px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.divider span:last-child{transform:scaleX(-1)}
.divider i{display:block;width:5px;height:5px;border:1px solid currentColor;transform:rotate(45deg)}

.footer{
  padding:20px 0 50px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  color:#68776d;
  font-size:9px;
  font-weight:650;
  letter-spacing:.18em;
}
.footer-mark{color:#48574e;letter-spacing:.45em}

@keyframes pulse{0%,100%{opacity:.7;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media (max-width:760px){
  .maintenance-page:before{inset:12px}
  .maintenance-page:after{display:none}
  .masthead,.footer{width:calc(100% - 54px)}
  .masthead{padding-top:34px}
  .status{font-size:8px;letter-spacing:.15em}
  .status span:last-child{display:none}
  .wordmark{font-size:12px}
  .custom-logo{max-height:44px;max-width:230px}
  .hero{width:calc(100% - 44px);padding:46px 0 65px}
  .seal{width:92px;height:92px;margin-bottom:28px}
  .ornament{margin-bottom:24px}
  .hero h1{font-size:clamp(3.15rem,16vw,5.5rem);line-height:.92;letter-spacing:-.052em}
  .subtitle{font-size:.72rem;letter-spacing:.14em;margin-top:24px}
  .footer{padding-bottom:34px}
  .footer-mark{display:none}
}

@media (prefers-reduced-motion:reduce){.status-dot,.seal svg{animation:none}}
