/* Tema oscuro Mimatia para las páginas de seguridad (DBShield, FireTSA, FirePKI, CertBot, PKI).
   Se carga después del <style> de cada página para pisar tokens y colores fijos. */
:root{
  --verde:#2fd18b; --verde-oscuro:#25b878; --verde2:#25b878;
  --tinta:#eef3ef; --gris:#9fb0a6;
  --fondo:#0a0f0c; --fondo-alt:#0f1612; --borde:#22302a;
  --ease:cubic-bezier(.23,1,.32,1);
}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}
body{background:var(--fondo);color:var(--tinta);-webkit-font-smoothing:antialiased}

/* header */
header{background:rgba(10,15,12,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--borde)}
.logo{color:var(--tinta);gap:10px!important;letter-spacing:-.03em}
.logo img{height:36px;width:36px;object-fit:contain;border-radius:8px}
.nav a{color:var(--gris);transition:color 160ms ease}

/* buttons */
.btn{border-radius:12px;transition:transform 160ms var(--ease),background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--verde);color:#04210f}
.nav a.btn-primary,.nav a.btn-primary:hover{color:#04210f}
.btn-wa{background:#25d366;color:#04210f}
.btn-outline{background:transparent;color:var(--tinta);border-color:var(--borde)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#4be0a0;transform:none}
  .btn-wa:hover{background:#3be07a;transform:none}
  .nav a:hover{color:var(--tinta)}
}
@media (hover:none){.btn-primary:hover,.btn-wa:hover{transform:none}}

/* hero: mismo lenguaje cálido que el home */
.hero{background:radial-gradient(70% 90% at 85% 0%,rgba(224,185,114,.14),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(47,209,139,.12),transparent 60%),var(--fondo);border-bottom:1px solid var(--borde)}
.hero .tag{color:#e0b972;border-color:rgba(224,185,114,.35);background:rgba(224,185,114,.06)}
.hero h1 span{color:var(--verde)}
.hero .btn-outline,.cta-final .btn-outline{border-color:var(--borde);color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.hero .btn-outline:hover,.cta-final .btn-outline:hover{border-color:var(--verde);color:var(--verde)}}

/* superficies */
.alt{background:var(--fondo-alt);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.card,.step,.mod,.plan,.risk,.faq details,table.cmp,.engines span,.stack span{background:#131c17;border-color:var(--borde);color:var(--tinta)}
.risk{border-left-color:#c0392b}
.risk h3{color:#ff9a8c}
.card,.mod,.plan,.step{transition:transform 220ms var(--ease),border-color 220ms ease}
@media (hover:hover) and (pointer:fine){.card:hover,.mod:hover,.step:hover{transform:translateY(-3px);border-color:#37574a}}
.plan.featured{border-color:var(--verde);box-shadow:0 18px 50px rgba(47,209,139,.12)}
.plan.featured::before{background:var(--verde);color:#04210f}
.step .n{color:#04210f}
.mod .badge{color:var(--verde);background:rgba(47,209,139,.12)}
.mod .badge.wip{color:#9fd0ff;background:rgba(29,112,184,.22)}
table.cmp th{background:#18231c;color:var(--gris)}
table.cmp td,table.cmp th{border-bottom-color:var(--borde)}
.diagram{border-color:var(--borde)}

/* faq */
.faq summary,details summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:#e0b972;transition:transform 200ms var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}

/* bandas y pie */
.cta-final,.band{background:radial-gradient(90% 120% at 50% 0%,#1f3a2b,#0f1612);border-top:1px solid #2f4a3c}
footer{background:#070b09;border-top:1px solid var(--borde)}
footer a{color:var(--verde)}

/* botón flotante de WhatsApp */
.fab{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25d366;color:#04210f;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform 160ms var(--ease)}
.fab:active{transform:scale(.94)}
.fab svg{width:28px;height:28px}
@media (hover:hover) and (pointer:fine){.fab:hover{transform:scale(1.06)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card,.mod,.step,.plan,.fab{transition:none}
}

/* tabla comparativa: scroll interno en móvil en vez de desbordar la página */
@media (max-width:700px){
  table.cmp{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  table.cmp th,table.cmp td{min-width:150px;padding:12px 14px}
}