/* SysteraPrime 3.0 — restauración tipográfica y evolución visual 2026 */
:root{
  --font-body:Arial,Helvetica,sans-serif;
  --font-display:Georgia,"Times New Roman",serif;
  --academic-blue:#315f79;
  --academic-violet:#6d5b87;
  --academic-mint:#4d8a7c;
  --glass:rgba(255,253,248,.76);
}
body,button,input,select,textarea{font-family:var(--font-body)}
h1,h2,h3,.research-card-head h2,.stage-card strong,.service-card h3,
.method-title,.faq-intro h2,.final-cta h2,.listing-hero h1,.resource-card h2,
.service-page-grid h2,.content-section h2,.content-section h3{
  font-family:var(--font-display);
  text-wrap:balance;
}
body{
  background:
    radial-gradient(circle at 8% 6%,rgba(49,95,121,.09),transparent 30rem),
    radial-gradient(circle at 92% 12%,rgba(109,91,135,.08),transparent 34rem),
    radial-gradient(circle at 70% 80%,rgba(77,138,124,.06),transparent 36rem),
    var(--paper);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(49,95,121,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(49,95,121,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000,transparent 58%);
}
.site-header{
  border-bottom-color:rgba(49,95,121,.11);
  background:rgba(255,253,248,.82);
  box-shadow:0 10px 34px rgba(55,43,34,.045);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(49,95,121,.4),rgba(183,133,46,.5),transparent);
}
.brand img{filter:drop-shadow(0 8px 18px rgba(74,47,25,.08));}
.main-nav a{font-weight:760}
.hero{
  isolation:isolate;
  background-size:84px 84px;
}
.hero::before{
  background:
    radial-gradient(circle at 74% 45%,rgba(49,95,121,.14),transparent 25rem),
    radial-gradient(circle at 90% 8%,rgba(109,91,135,.11),transparent 24rem),
    radial-gradient(circle at 20% 82%,rgba(215,173,91,.10),transparent 20rem),
    linear-gradient(90deg,rgba(255,253,248,.97),rgba(255,253,248,.34));
}
.hero::after{
  content:"";
  position:absolute;
  width:620px;height:620px;
  right:-190px;top:40px;
  border:1px solid rgba(49,95,121,.12);
  border-radius:50%;
  box-shadow:
    0 0 0 72px rgba(49,95,121,.035),
    0 0 0 144px rgba(109,91,135,.025);
  z-index:0;
  pointer-events:none;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.048em;
  line-height:1.01;
}
.hero h1 em{
  background:linear-gradient(110deg,var(--coral),var(--gold),var(--academic-blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{font-weight:470}
.eyebrow{
  padding:8px 12px 8px 8px;
  border:1px solid rgba(49,95,121,.14);
  border-radius:999px;
  background:rgba(255,255,255,.52);
  box-shadow:0 10px 28px rgba(49,95,121,.06);
}
.research-card{
  border-color:rgba(49,95,121,.17);
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,253,248,.78));
  box-shadow:
    0 45px 110px rgba(41,33,28,.17),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.research-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(49,95,121,.42),rgba(215,173,91,.22),rgba(109,91,135,.36));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.flow-line i{
  background:linear-gradient(90deg,var(--academic-blue),var(--gold),var(--coral));
}
.flow-check{
  box-shadow:0 0 0 6px rgba(77,138,124,.08);
}
.floating-note{
  border-color:rgba(49,95,121,.16);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);
}
.stage-section,.method-section,.quality-section,.faq-section{
  position:relative;
}
.stage-card,.service-card,.resource-card,.career-guide-card,.service-page-grid article{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,253,248,.74));
  border-color:rgba(49,95,121,.12);
}
.stage-card:hover,.stage-card.is-selected,.service-card:hover,.resource-card:hover{
  border-color:rgba(49,95,121,.28);
  box-shadow:0 28px 76px rgba(43,58,66,.13);
}
.stage-card::after,.service-card::after{
  content:"";
  position:absolute;
  width:130px;height:130px;
  right:-65px;bottom:-72px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(49,95,121,.12),transparent 68%);
  pointer-events:none;
}
.services-section{
  background:
    radial-gradient(circle at 10% 15%,rgba(49,95,121,.07),transparent 28rem),
    radial-gradient(circle at 90% 80%,rgba(109,91,135,.06),transparent 30rem),
    var(--cream);
}
.integrity-panel,.quality-panel,.quote-shell,.final-cta-inner{
  border:1px solid rgba(49,95,121,.13);
  box-shadow:0 30px 90px rgba(50,38,29,.09);
}
footer{
  background:
    radial-gradient(circle at 10% 0,rgba(49,95,121,.22),transparent 28rem),
    radial-gradient(circle at 85% 110%,rgba(183,133,46,.14),transparent 28rem),
    #17191b;
}
.back-to-top{
  position:fixed;
  z-index:74;
  right:31px;
  bottom:94px;
  width:48px;height:48px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:rgba(43,36,30,.92);
  color:#fff;
  box-shadow:0 16px 38px rgba(28,23,20,.24);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease,background .2s ease;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--coral);transform:translateY(-3px)}
.back-to-top svg{width:20px;height:20px}
main>section:not(.hero),footer{content-visibility:auto;contain-intrinsic-size:900px}
@media (max-width:900px){
  .hero::after{width:420px;height:420px;right:-230px}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(43px,12vw,62px)}
  .back-to-top{right:18px;bottom:82px;width:44px;height:44px}
  .whatsapp-float{right:16px;bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .research-card,.stage-card,.service-card,.back-to-top{transition:none!important}
}