/*
------------------------------------------------
PROJECT:      SECURITY255.COM
VERSION:      v6
TYPE:         Cybersecurity Firm Website

TECH STACK
------------------------------------------------
HTML5 / CSS3 / JavaScript

DESIGN
------------------------------------------------
Concept:      Inspired by String Theory
Palette:      Black / White / Orange / Gray
Typography:   Inter / System UI Sans-Serif
Theme:        Light + Dark Mode Support
Layout:       Responsive (Desktop + Mobile)

FEATURES
------------------------------------------------
Off-canvas Mobile Navigation
Adaptive Logo depending on Theme
Cybersecurity / Infrastructure / Trust Focus

AUTHORSHIP
------------------------------------------------
Author:       Arturo Pacheco
Owner:        SECURITY255
Copyright:    © SECURITY255

NOTICE
------------------------------------------------
This code is original work.
You may take inspiration, but direct copying is not permitted.
*/

@media(max-width:640px){
  .brand .logo-lt,.brand .logo-dk{display:none!important}
  .brand .logo-mb{display:block!important}
}

@media(max-width:880px){.nav-links{display:none}}

@media(max-width:768px){.hero-main{padding:48px 28px 40px}}

@media(max-width:768px){.metrics-strip{grid-template-columns:1fr 1fr}}

@media(max-width:480px){.metrics-strip{grid-template-columns:1fr}}

@media(max-width:660px){.method-grid{grid-template-columns:1fr}}

@media(max-width:880px){.cards-grid{grid-template-columns:1fr 1fr}}

@media(max-width:560px){.cards-grid{grid-template-columns:1fr}}

@media(max-width:880px){.trust-grid{grid-template-columns:1fr}}

@media(max-width:880px){.contact-inner{grid-template-columns:1fr}}

@media(max-width:880px){.contact-info{border-right:none;border-bottom:1px solid var(--stroke);padding:36px 28px}}

@media(max-width:880px){.contact-form-area{padding:36px 28px}}

@media(max-width:560px){.fg-row{grid-template-columns:1fr}}

@media(max-width:880px){.foot-row{grid-template-columns:1fr 1fr;gap:24px}}

@media(max-width:560px){.foot-row{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* CAMBIO 6 — Se eliminó la regla "#loader{display:none!important}" porque
     el loader ya no existe en páginas secundarias (ver CAMBIO 1). */
  #site{opacity:1!important}
  .reveal{opacity:1!important;transform:none!important}
}

@media(max-width:880px){
  /* Desktop CTAs hidden in top bar; shown in drawer */
  .nav-right a.btn{display:none!important;}
  body.nav-open{overflow:hidden;touch-action:none}
  .nav-right{gap:10px}
}

@media(max-width:880px){ .mb-toggle{display:grid;place-items:center} }

@media(max-width:700px){.founder-block{grid-template-columns:1fr}}

@media(max-width:900px){.cases-grid{grid-template-columns:1fr}}

@media(max-width:700px){
  #scrollCapture{flex-direction:column;gap:10px;padding:16px 18px}
  #scrollCapture input[type=email]{width:100%}
  #scrollCapture .sc-label{text-align:center}
}


.footer-legal-links{margin-top:14px;font-size:12px;color:var(--muted2);display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.footer-legal-links a{color:var(--muted2);text-decoration:none;border-bottom:1px solid transparent;transition:var(--trans)}
.footer-legal-links a:hover{color:var(--text);border-bottom-color:rgba(201,168,76,.35)}