@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

@font-face{font-family:Quedora;src:url('/fonts/Quedora-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Quedora;src:url('/fonts/Quedora-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Quedora;src:url('/fonts/Quedora-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}

body{background:#000;font-family:Poppins,Arial,sans-serif}
header nav a,header nav button{font-family:Quedora,sans-serif;font-weight:500}
.utility{background:#000;height:1.7vw;min-height:19px}
.brand .design-header-logo,.brand .design-footer-logo{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}

@media(min-width:901px){
  header{width:71%;max-width:none;height:7.4vw;min-height:0;gap:6%;padding:0;margin:0 auto;background:#000}
  header>.brand{width:18%;height:auto;aspect-ratio:275/82}
  header nav{width:auto;max-width:none;min-height:4.2vw;flex:1;margin:0;padding:1.2vw 2.2vw;border-radius:11px;gap:2vw}
  header nav a,header nav button{font-size:clamp(11px,.82vw,18px)}
}

#inicio{background:#000;padding:.65vw 6.5% 0}
#inicio:before{display:none}
#inicio .home-video-layer{inset:0 0 auto;height:36vw;min-height:380px;background:linear-gradient(180deg,rgba(0,9,22,.55),rgba(0,10,27,.7) 57%,#000 100%),url('/design-home/monitoring-room.png') center 40%/cover no-repeat}
#inicio .home-video-layer:after{display:block;background:linear-gradient(180deg,rgba(0,9,22,.42),rgba(0,10,27,.5) 57%,#000 100%)}
#inicio .intro{position:relative;z-index:1;max-width:none;min-height:33vw;margin:0 auto;text-align:center}
#inicio h1{font-family:Quedora,sans-serif;font-weight:500;font-size:clamp(28px,3.3vw,73px);line-height:1;letter-spacing:.04em;margin:0 auto 13px;white-space:nowrap}
#inicio .intro-copy{font-family:Poppins,Arial,sans-serif;font-size:clamp(12px,1.15vw,26px);font-weight:400;line-height:1.35;max-width:44vw;margin:0 auto;color:#fff}
#inicio .intro-copy strong{font-weight:600}
#inicio .actions{margin-top:2.1vw;gap:1.7vw}
#inicio .actions .button{font-family:Poppins,Arial,sans-serif;font-size:clamp(12px,.96vw,22px);font-weight:600;min-height:2.6vw;padding:.55vw 1.5vw;border-radius:8px}
#inicio .actions .button.primary{background:linear-gradient(100deg,#0756b8,#248bff)}
#inicio .actions .button.secondary{border-color:#168bff;background:#02050a}
#inicio .actions .button.secondary:before{content:'';display:inline-block;width:1.3em;height:1.7em;background:url('/design-home/symbol.png') center/contain no-repeat;margin-right:.45em}

#inicio .home-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,8.3vw);gap:.7vw;max-width:none;margin:0 auto 2vw}
#inicio .photo-card.camera{grid-column:1/4;grid-row:1}
#inicio .photo-card.fire{grid-column:4/7;grid-row:1}
#inicio .photo-card.alarm{grid-column:1/3;grid-row:2}
#inicio .photo-card.fence{grid-column:3/5;grid-row:2}
#inicio .photo-card.access{grid-column:5/7;grid-row:2}
#inicio .photo-card{height:100%;aspect-ratio:auto;border:1px solid #737b84;border-radius:15px;background:#08090b;transition:border-color .25s,box-shadow .25s,background-color .25s}
#inicio .photo-card .crop{inset:0}
#inicio .home-grid .photo-card .crop img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:none;mask-image:none;filter:grayscale(1) brightness(.67);transition:filter .3s,transform .5s,opacity .25s}
#inicio .home-grid .photo-card .crop:before{display:none}
#inicio .photo-card:before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 27%,#000),#000 82%);opacity:0;transition:opacity .25s;pointer-events:none}
#inicio .photo-card:after{background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.05) 85%)}
#inicio .photo-label{inset:auto 3.5% 15%;z-index:3;gap:1vw;font-family:Quedora,sans-serif;font-size:clamp(10px,.92vw,21px);font-weight:500;letter-spacing:.08em;line-height:1.25;text-transform:uppercase}
#inicio .photo-label svg{width:clamp(28px,2.7vw,60px);height:clamp(28px,2.7vw,60px);min-width:clamp(28px,2.7vw,60px)}
#inicio .photo-label b{display:none}
#inicio .photo-card:hover,#inicio .photo-card:focus-visible{border-color:var(--card-accent);background:#000;box-shadow:0 0 8px color-mix(in srgb,var(--card-accent) 75%,transparent),0 0 22px color-mix(in srgb,var(--card-accent) 35%,transparent)}
#inicio .photo-card:hover:before,#inicio .photo-card:focus-visible:before{opacity:1}
#inicio .home-grid .photo-card:hover .crop img,#inicio .home-grid .photo-card:focus-visible .crop img{opacity:0}
#inicio .photo-card:hover .crop,#inicio .photo-card:focus-visible .crop{transform:none}
#inicio .photo-card:hover .photo-label,#inicio .photo-card:focus-visible .photo-label{inset:0;justify-content:center;padding:0 12px;gap:1.2vw;font-size:clamp(12px,1.5vw,27px)}
#inicio .photo-card:hover .photo-label svg,#inicio .photo-card:focus-visible .photo-label svg{width:clamp(32px,4vw,72px);height:clamp(32px,4vw,72px);min-width:clamp(32px,4vw,72px)}

#inicio .home-trust{width:100%;max-width:none;min-height:0;margin:0 auto 5vw;padding:3.5vw 4% 2.3vw;border-radius:0 0 6vw 6vw;background:radial-gradient(ellipse at 50% 110%,#0756b8,transparent 46%),linear-gradient(#000 42%,#121416)}
#inicio .trust-heading{padding:0 16%}
#inicio .trust-heading h2{font-family:Quedora,sans-serif;font-size:clamp(25px,2.05vw,46px);font-weight:500;letter-spacing:0;line-height:1.3;color:#168bff;margin:0}
#inicio .trust-heading p{font-family:Poppins,Arial,sans-serif;font-size:clamp(14px,1.18vw,27px);line-height:1.35;color:#fff;margin:0}
#inicio .trust-grid{grid-template-columns:repeat(4,1fr);gap:3vw;margin-top:4vw}
#inicio .trust-grid article svg{width:clamp(45px,3.6vw,80px);height:clamp(45px,3.6vw,80px);margin-bottom:1.5vw;color:#fff}
#inicio .trust-grid h3{font-family:Quedora,sans-serif;font-size:clamp(14px,1.04vw,23px);font-weight:500;letter-spacing:.02em;line-height:1.45;max-width:210px;margin:auto;color:#fff}
#inicio .trust-grid p{display:none}
#inicio .home-trust>.button{position:absolute;right:3.2%;top:3.7vw;margin:0;padding:.6vw 1vw;border-color:#168bff;border-radius:7px;font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:clamp(11px,.8vw,18px)}
#inicio .home-trust>.button:before{content:'';display:inline-block;width:1.3em;height:1.7em;background:url('/design-home/symbol.png') center/contain no-repeat;margin-right:.5em}

body:has(#inicio:not([hidden])) .site-footer{padding:0 4% 5vw;background:#000}
body:has(#inicio:not([hidden])) .footer-panel{max-width:none;border-color:#304250;border-radius:2vw;background:linear-gradient(0deg,#141618,#000 36%)}
body:has(#inicio:not([hidden])) .footer-identity{padding:3.1vw 3.5vw 1.8vw;gap:3vw;border:0}
body:has(#inicio:not([hidden])) .footer-identity .brand{width:16%;height:auto;aspect-ratio:309/127}
body:has(#inicio:not([hidden])) .footer-identity .eyebrow{font-family:Poppins,Arial,sans-serif;font-size:clamp(9px,.65vw,15px);letter-spacing:.4em;color:#a7bfdb}
body:has(#inicio:not([hidden])) .footer-identity h2{font-family:Poppins,Arial,sans-serif;font-size:clamp(22px,1.75vw,40px);font-weight:500;letter-spacing:-.03em;margin:1.4vw 0 .9vw}
body:has(#inicio:not([hidden])) .footer-identity p:last-child{font-size:clamp(12px,.9vw,20px)}
body:has(#inicio:not([hidden])) .footer-identity>.button{font-size:clamp(11px,.9vw,20px);font-weight:600;padding:1vw 1.4vw;border-radius:10px}
body:has(#inicio:not([hidden])) .footer-nav{padding:0 3.5vw}
body:has(#inicio:not([hidden])) .footer-tabs{gap:1.2vw;margin-bottom:2vw}
body:has(#inicio:not([hidden])) .footer-tabs button{border-color:#304250;font-family:Poppins,Arial,sans-serif;font-size:clamp(12px,.95vw,22px);font-weight:300;padding:1vw;border-radius:12px}
body:has(#inicio:not([hidden])) .footer-tabs button[aria-selected=true]{background:radial-gradient(ellipse at 50% 105%,#0054b7,transparent 70%);border-color:#168bff;font-weight:400}
body:has(#inicio:not([hidden])) .footer-links{gap:2vw;min-height:11vw}
body:has(#inicio:not([hidden])) .footer-links h3{font-family:Poppins,Arial,sans-serif;font-size:clamp(10px,.72vw,16px);letter-spacing:.28em;margin-bottom:1.25vw}
body:has(#inicio:not([hidden])) .footer-links a,body:has(#inicio:not([hidden])) .footer-links p{font-size:clamp(11px,.88vw,20px);line-height:1.55}
body:has(#inicio:not([hidden])) .footer-end{border:0;padding:.8vw 3.5vw;gap:2vw}
body:has(#inicio:not([hidden])) .footer-socials a,body:has(#inicio:not([hidden])) .footer-socials button{width:2.4vw;height:2.4vw;min-width:30px;min-height:30px}

@media(max-width:900px){
  header{width:92%;height:80px;padding:8px 0}
  header>.brand{width:170px;height:55px}
  #inicio{padding:22px 5% 0}
  #inicio .home-video-layer{height:490px;background-position:center 35%}
  #inicio .intro{min-height:350px}
  #inicio h1{white-space:normal;font-size:clamp(25px,5.1vw,40px);letter-spacing:.04em}
  #inicio .intro-copy{font-size:14px;max-width:650px}
  #inicio .actions{margin-top:25px;gap:12px}
  #inicio .actions .button{min-height:42px;padding:9px 14px;font-size:12px}
  #inicio .home-grid{grid-template-rows:repeat(2,105px);gap:9px;margin-bottom:50px}
  #inicio .photo-label{inset:auto 12px 15px;font-size:10px;gap:7px}
  #inicio .photo-label svg{width:28px;height:28px;min-width:28px}
  #inicio .home-trust{min-height:350px;padding:42px 22px 55px;margin-bottom:65px;border-radius:0 0 42px 42px}
  #inicio .trust-heading{padding:0 100px}
  #inicio .trust-grid{margin-top:58px;gap:15px}
  #inicio .trust-grid article svg{width:48px;height:48px;margin-bottom:12px}
  #inicio .trust-grid h3{font-size:12px}
  #inicio .home-trust>.button{top:45px;right:18px;padding:7px 9px}
  body:has(#inicio:not([hidden])) .footer-panel{border-radius:22px}
  body:has(#inicio:not([hidden])) .footer-identity{padding:30px;gap:20px}
  body:has(#inicio:not([hidden])) .footer-identity .brand{width:170px}
  body:has(#inicio:not([hidden])) .footer-nav{padding:0 30px}
  body:has(#inicio:not([hidden])) .footer-tabs{gap:10px;margin-bottom:24px}
  body:has(#inicio:not([hidden])) .footer-tabs button{padding:10px}
  body:has(#inicio:not([hidden])) .footer-links{min-height:160px}
  body:has(#inicio:not([hidden])) .footer-end{padding:20px 30px}
  body:has(#inicio:not([hidden])) .footer-socials a,body:has(#inicio:not([hidden])) .footer-socials button{width:32px;height:32px}
}

@media(max-width:620px){
  #inicio .home-video-layer{height:570px;background-position:44% center}
  #inicio .intro{min-height:380px}
  #inicio .actions{flex-wrap:wrap;justify-content:center}
  #inicio .home-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,130px);gap:9px}
  #inicio .photo-card.camera{grid-column:1;grid-row:1}
  #inicio .photo-card.fire{grid-column:2;grid-row:1}
  #inicio .photo-card.alarm{grid-column:1;grid-row:2}
  #inicio .photo-card.fence{grid-column:2;grid-row:2}
  #inicio .photo-card.access{grid-column:1/3;grid-row:3}
  #inicio .photo-label{font-size:9px;letter-spacing:0}
  #inicio .photo-card:hover .photo-label,#inicio .photo-card:focus-visible .photo-label{font-size:10px;gap:7px}
  #inicio .photo-card:hover .photo-label svg,#inicio .photo-card:focus-visible .photo-label svg{width:32px;height:32px;min-width:32px}
  #inicio .home-trust{min-height:0;padding:30px 17px 45px}
  #inicio .trust-heading{padding:0 5px}
  #inicio .trust-heading h2{font-size:25px}
  #inicio .trust-heading p{font-size:13px}
  #inicio .trust-grid{grid-template-columns:repeat(2,1fr);gap:32px 14px;margin-top:40px}
  #inicio .home-trust>.button{position:static;display:inline-flex;margin-top:38px;padding:9px 14px}
  body:has(#inicio:not([hidden])) .footer-identity{padding:26px 22px;flex-wrap:wrap}
  body:has(#inicio:not([hidden])) .footer-identity .brand{width:160px}
  body:has(#inicio:not([hidden])) .footer-identity>div{flex-basis:100%}
  body:has(#inicio:not([hidden])) .footer-identity>.button{padding:11px 15px}
  body:has(#inicio:not([hidden])) .footer-nav{padding:0 22px}
  body:has(#inicio:not([hidden])) .footer-links{grid-template-columns:1fr;gap:20px}
  body:has(#inicio:not([hidden])) .footer-end{padding:20px 22px;flex-wrap:wrap}
}