/*
 * Pulsoweb Maintenance — landing "Pulsoweb en obras".
 * Se usa solo en templates/mantenimiento.php, que sustituye la página del
 * plugin Maintenance mientras el modo mantenimiento está activo.
 */

/* ---------- tokens y base ---------- */
:root{
  --orange:#FF4F18;
  --orange-2:#FF7A21;
  --ink:#001D3F;
  --ink-deep:#00101F;
  --paper:#F4F5F9;
  --white:#FFFFFF;
  --muted:#52607a;
  --muted-dark:#93a3bf;
  --line:#dfe3ec;
  --line-dark:#16304f;
  --sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme:light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-0.025em;}
p{margin:0;}
a{color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:6px;}

.band{padding-inline:20px;}
.wrap{max-width:1100px; margin-inline:auto;}

/* ---------- top bar ---------- */
.top{padding-block:22px;}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.top-logo{height:30px; width:auto; display:block;}
.status{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; color:var(--muted);
}
.status i{
  width:8px; height:8px; border-radius:50%; background:var(--orange); display:block;
  animation:beat 1.6s ease-out infinite;
}
@keyframes beat{
  0%{box-shadow:0 0 0 0 rgba(255,79,24,.55);}
  60%,100%{box-shadow:0 0 0 9px rgba(255,79,24,0);}
}

/* ---------- hero ---------- */
.hero{padding-block:36px 88px;}
.hero .wrap{display:flex; flex-direction:column; align-items:center; text-align:center; gap:34px;}

.stage-wrap{width:min(620px,100%); display:flex; flex-direction:column; align-items:center; gap:16px;}
.stage{
  position:relative;
  width:100%;
  aspect-ratio:1240/270;
}
.old,.newlogo{
  position:absolute; left:0; top:50%; width:100%; height:auto;
  transform:translateY(-50%);
  will-change:opacity, filter, transform;
}
.old{animation:swapOld 7s cubic-bezier(.65,0,.35,1) infinite;}
.newlogo{animation:swapNew 7s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes swapOld{
  0%,34%{opacity:1; filter:blur(0); transform:translateY(-50%) scale(1);}
  46%,88%{opacity:0; filter:blur(10px); transform:translateY(-50%) scale(.94);}
  100%{opacity:1; filter:blur(0); transform:translateY(-50%) scale(1);}
}
@keyframes swapNew{
  0%,38%{opacity:0; filter:blur(10px); transform:translateY(-50%) scale(1.06);}
  50%,84%{opacity:1; filter:blur(0); transform:translateY(-50%) scale(1);}
  96%,100%{opacity:0; filter:blur(10px); transform:translateY(-50%) scale(1.06);}
}
.stage-foot{position:relative; height:30px; width:100%;}
.tag-lbl{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; white-space:nowrap;
}
.tag-old{color:var(--muted); border:1px solid var(--line); animation:lblOld 7s ease-in-out infinite;}
.tag-new{color:var(--white); background:var(--orange); animation:lblNew 7s ease-in-out infinite;}
@keyframes lblOld{0%,36%{opacity:1;} 44%,90%{opacity:0;} 98%,100%{opacity:1;}}
@keyframes lblNew{0%,40%{opacity:0;} 48%,84%{opacity:1;} 92%,100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .old,.tag-old{opacity:0 !important;}
  .newlogo{opacity:1 !important; filter:none !important;}
  .tag-new{opacity:1 !important;}
}

.hero h1{
  font-size:clamp(40px, 8.4vw, 92px);
  line-height:.98;
  font-weight:800;
  max-width:12ch;
}
.hero h1 em{font-style:normal; color:var(--orange);}
.lede{font-size:clamp(17px,2.1vw,20px); color:var(--muted); max-width:52ch;}
.actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px; border-radius:14px; font-weight:700; font-size:15.5px;
  text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease;
  font-variant-numeric:tabular-nums;
}
.btn svg{width:17px; height:17px; flex:none;}
.btn-main{background:var(--orange); color:var(--white);}
.btn-main:hover{background:var(--orange-2);}
.btn-line{border:1.5px solid var(--ink); color:var(--ink);}
.btn-line:hover{background:var(--ink); color:var(--white);}

/* ---------- build log ---------- */
.build{background:var(--ink); color:var(--white); padding-block:88px;}
.build .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px; align-items:center;}
.kicker{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--orange-2); margin-bottom:16px; display:block;}
.build h2{font-size:clamp(30px,4.2vw,46px); line-height:1.05; font-weight:800;}
.build .copy p{color:var(--muted-dark); margin-top:18px; max-width:44ch;}

.terminal{
  background:var(--ink-deep); border:1px solid var(--line-dark); border-radius:18px;
  font-family:var(--mono); font-size:13.5px; overflow:hidden;
}
.term-head{
  display:flex; justify-content:space-between; gap:12px; padding:14px 20px;
  border-bottom:1px solid var(--line-dark); color:var(--muted-dark); font-size:12px;
}
.term-body{padding:22px 20px 24px; display:flex; flex-direction:column; gap:12px; overflow-x:auto;}
.cmd{color:var(--muted-dark);}
.cmd b{color:var(--orange-2); font-weight:500;}
.row{display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:baseline;}
.row .st{font-size:12px; color:var(--muted-dark);}
.ok{color:#5fd49a;}
.run{color:var(--orange-2);}
.todo{color:#5a6d8c;}
.row.dim .txt{color:#8193b0;}
.sub{grid-column:2 / -1; color:#6f82a3; font-size:12px; margin-top:-6px;}
.spin{display:inline-block; animation:spin 1s steps(4) infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.bar{margin-top:10px; display:flex; align-items:center; gap:14px;}
.bar-track{flex:1; height:6px; background:var(--line-dark); border-radius:6px; overflow:hidden;}
.bar-fill{height:100%; width:78%; background:linear-gradient(90deg,var(--orange),var(--orange-2)); border-radius:6px; transform-origin:left; animation:fill 1.8s cubic-bezier(.2,.8,.2,1) .4s both;}
@keyframes fill{from{transform:scaleX(.08);} to{transform:scaleX(1);}}
.bar span{color:var(--white); font-variant-numeric:tabular-nums;}
.caret{display:inline-block; width:8px; height:15px; background:var(--orange-2); vertical-align:-2px; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

/* ---------- services ---------- */
.services{padding-block:96px;}
.services header{display:flex; justify-content:space-between; align-items:end; gap:32px; flex-wrap:wrap; margin-bottom:48px;}
.services h2{font-size:clamp(30px,4.2vw,46px); line-height:1.05; font-weight:800; max-width:17ch;}
.services header p{color:var(--muted); max-width:36ch;}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1.5px solid var(--ink);}
.svc{padding:28px 28px 8px 0; display:flex; flex-direction:column; gap:12px;}
.svc + .svc{padding-left:28px; border-left:1px solid var(--line);}
.svc .tag{font-family:var(--mono); font-size:12px; color:var(--orange);}
.svc h3{font-size:22px; font-weight:700;}
.svc p{color:var(--muted); font-size:15px;}
.who{margin-top:44px; font-family:var(--mono); font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 22px;}
.who b{color:var(--ink); font-weight:500;}

/* ---------- ceo ---------- */
.ceo{padding-block:0 96px;}
.ceo .wrap{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center;
  background:var(--white); border-radius:28px; padding:28px;
}
.ceo figure{margin:0; position:relative;}
.ceo img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:18px; background:#eef0f4;}
.ceo figcaption{
  position:absolute; left:14px; bottom:14px;
  background:var(--ink); color:var(--white); font-family:var(--mono); font-size:11.5px;
  padding:6px 11px; border-radius:8px;
}
.ceo .kicker{color:var(--orange);}
.ceo-text{display:flex; flex-direction:column; gap:22px; padding-right:12px;}
.ceo h2{font-size:clamp(34px,4.6vw,52px); font-weight:800; line-height:1;}
.role{font-weight:700; color:var(--orange); margin-top:8px;}
blockquote{
  margin:0; font-size:clamp(19px,2.1vw,23px); line-height:1.4; font-weight:500; letter-spacing:-.01em;
}
blockquote::before{content:"“"; color:var(--orange);}
blockquote::after{content:"”"; color:var(--orange);}
.ceo-bio{color:var(--muted); max-width:52ch;}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; border-top:1px solid var(--line); padding-top:20px; margin:0;}
.facts dt{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-bottom:4px;}
.facts dd{margin:0; font-weight:700; font-size:15px; line-height:1.3;}
.li{display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; align-self:flex-start; border-bottom:1.5px solid var(--orange); padding-bottom:2px;}
.li svg{width:16px; height:16px;}
.li:hover{color:var(--orange);}

/* ---------- contact ---------- */
.contact{background:var(--ink-deep); color:var(--white); padding-block:96px 40px;}
.contact h2{font-size:clamp(30px,4.2vw,46px); line-height:1.05; font-weight:800; max-width:18ch;}
.contact .intro{color:var(--muted-dark); margin-top:16px; max-width:48ch;}
.channels{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:48px; border-top:1px solid var(--line-dark);}
.channel{
  display:flex; flex-direction:column; gap:10px; padding:30px 0; text-decoration:none;
  border-bottom:1px solid var(--line-dark);
}
.channel + .channel{padding-left:32px; border-left:1px solid var(--line-dark);}
.channel span{font-family:var(--mono); font-size:12px; color:var(--muted-dark);}
.channel strong{font-size:clamp(22px,3.3vw,38px); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; transition:color .2s ease;}
.channel:hover strong{color:var(--orange-2);}
.channel em{font-style:normal; color:var(--orange-2); font-size:14px; font-weight:500;}
.foot{margin-top:72px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; color:var(--muted-dark); font-size:13px;}
.foot img{height:26px; width:auto; display:block;}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .build .wrap, .ceo .wrap{grid-template-columns:1fr; gap:36px;}
  .ceo figure{max-width:420px;}
  .grid3{grid-template-columns:1fr;}
  .svc, .svc + .svc{padding:24px 0; border-left:none;}
  .svc + .svc{border-top:1px solid var(--line);}
}
@media (max-width: 560px){
  .channels{grid-template-columns:1fr;}
  .channel + .channel{padding-left:0; border-left:none;}
  .facts{grid-template-columns:1fr; gap:12px;}
  .ceo .wrap{padding:16px; border-radius:22px;}
  .ceo-text{padding-right:0;}
  .hero{padding-block:24px 64px;}
  .build,.services{padding-block:64px;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}