body{margin:0;background:#FFFFFF}
a{color:#172B4D}a:hover{color:#C2571A}
html{scroll-behavior:smooth}

/* cinta de seguridad en movimiento */
.stripe{background:repeating-linear-gradient(-45deg,#F7934F 0 18px,#172B4D 18px 36px);animation:stripe 2.4s linear infinite}
@keyframes stripe{to{background-position:50.91px 0}}

/* navegación */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.navlink{background-image:linear-gradient(#F7934F,#F7934F);background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;padding-bottom:4px;transition:background-size .3s ease,color .2s}
.navlink:hover{background-size:100% 2px;color:#172B4D}
.logo{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.logo-link:hover .logo{transform:rotate(-3deg) scale(1.04)}
@supports (animation-timeline: scroll()){
  .logo{animation:logoshrink linear both;animation-timeline:scroll();animation-range:0 220px}
  @keyframes logoshrink{to{height:60px}}
}

/* botones */
.btn{transition:transform .2s ease,box-shadow .25s ease,background-color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,20,40,.18)}
.btn svg{transition:transform .25s ease}
.btn:hover svg{transform:translateX(4px)}
.pulse{animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(247,147,79,.55)}70%{box-shadow:0 0 0 14px rgba(247,147,79,0)}100%{box-shadow:0 0 0 0 rgba(247,147,79,0)}}

/* entrada del hero */
.in{opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* manómetro */
.needle{transform-box:view-box;transform-origin:60px 62px;animation:needle 2.2s cubic-bezier(.3,1.6,.5,1) .6s both}
@keyframes needle{from{transform:rotate(-85deg)}to{transform:rotate(4deg)}}
.gaugeok{opacity:0;animation:rise .5s ease 2.4s forwards}

/* checklist */
.chk circle{fill:#FFFFFF;stroke:#D5DBE5;transition:fill .3s}
.chk path{stroke-dasharray:14;stroke-dashoffset:14}
.c1 path{animation:tick .35s ease .9s forwards}.c1 circle{animation:fillc .3s ease .8s forwards}
.c2 path{animation:tick .35s ease 1.4s forwards}.c2 circle{animation:fillc .3s ease 1.3s forwards}
.c3 path{animation:tick .35s ease 1.9s forwards}.c3 circle{animation:fillc .3s ease 1.8s forwards}
.c4 path{animation:tick .35s ease 2.4s forwards}.c4 circle{animation:fillc .3s ease 2.3s forwards}
.c5 path{animation:tick .35s ease 2.9s forwards}.c5 circle{animation:fillc .3s ease 2.8s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
@keyframes fillc{to{fill:#F7934F;stroke:#F7934F}}
.bar{width:0;animation:bar 2.4s cubic-bezier(.4,0,.2,1) .8s forwards}
@keyframes bar{to{width:100%}}
.done{opacity:0;animation:rise .5s ease 3.4s forwards}

/* tarjetas */
.card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(10,20,40,.12)}
.ico{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.card:hover .ico{transform:rotate(-8deg) scale(1.08)}
.chip{transition:transform .25s,background-color .25s,color .25s}
.chip:hover{transform:translateX(4px);background-color:#172B4D;color:#FFFFFF}

/* galería */
.zoom img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.zoom:hover img{transform:scale(1.07)}
.zoom figcaption{transition:transform .35s,background-color .3s}
.zoom:hover figcaption{transform:translateY(-4px);background-color:#C2571A}

.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ggrid figure{margin:0;position:relative;border-radius:20px;overflow:hidden;background:#E3E7EE}
.ggrid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ggrid figcaption{position:absolute;left:12px;bottom:12px;right:12px;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;background:#172B4D;color:#FFFFFF;font-size:14px;font-weight:600;padding:8px 12px;border-radius:10px}
.pop{animation:pop .55s cubic-bezier(.2,.8,.2,1) both}
.ggrid .pop:nth-child(2){animation-delay:.05s}.ggrid .pop:nth-child(3){animation-delay:.1s}.ggrid .pop:nth-child(4){animation-delay:.15s}.ggrid .pop:nth-child(5){animation-delay:.2s}.ggrid .pop:nth-child(6){animation-delay:.25s}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.tab{transition:background-color .25s,color .25s,transform .2s,border-color .25s}
.tab:hover{transform:translateY(-2px);border-color:#F7934F !important}
.tab:focus-visible{outline:3px solid #F7934F;outline-offset:2px}
.live{animation:live 1.4s ease-in-out infinite}
@keyframes live{0%,100%{opacity:1}50%{opacity:.25}}

/* preguntas frecuentes */
.faq details{background:#FFFFFF;border:1.5px solid #E3E7EE;border-radius:16px;transition:border-color .25s,box-shadow .25s}
.faq details:hover{border-color:#F7B98F}
.faq details[open]{border-color:#F7934F;box-shadow:0 10px 26px rgba(10,20,40,.07)}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Zilla Slab',serif;font-weight:700;font-size:19px;line-height:1.25;color:#172B4D}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:3px solid #F7934F;outline-offset:2px;border-radius:14px}
.faq .plus{flex:none;width:32px;height:32px;border-radius:50%;background:#F2F4F7;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .3s}
.faq details[open] .plus{transform:rotate(45deg);background:#F7934F}
.faq .ans{padding:0 22px 22px;margin:0;font-size:16px;line-height:1.6;color:#475263;animation:rise .4s ease}

/* formulario, modal, cookies, whatsapp */
.linkbtn{background:none;border:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:#C2571A}
.overlay{animation:fade .25s ease both}
.modal{animation:rise .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal h3{font-family:'Zilla Slab',serif;font-size:20px;color:#172B4D;margin:24px 0 8px}
.modal p,.modal li{font-size:15px;line-height:1.6;color:#475263}
.modal ul{margin:0;padding-left:20px}
.cookie{animation:rise .5s cubic-bezier(.2,.8,.2,1) 1s both}
.wa{transition:transform .25s}
.wa:hover{transform:scale(1.08)}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:waring 2.4s ease-out infinite}
@keyframes waring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}80%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}
.foot a{color:#FFFFFF;text-decoration:none}
.foot a:hover{color:#F7934F}
.foot a.c3link{color:#F7934F !important;text-decoration:underline !important}
.foot a.c3link:hover{color:#FFFFFF !important}

/* ===== Lenguaje GC: franjas completas y placas industriales ===== */
section,footer.foot{max-width:none !important;margin:0 !important;border-radius:0 !important;border-left:0 !important;border-right:0 !important}
#servicios,#trabajos,#faq,.proc{padding:88px max(56px,calc((100% - 1240px) / 2)) !important}
.proc{border-top:0 !important;border-bottom:0 !important;background:#FFFFFF !important}
#inicio > div:first-child{padding:88px max(56px,calc((100% - 1240px) / 2)) 72px !important}
#extintores{padding:80px 56px 80px max(56px,calc((100vw - 1240px) / 2)) !important}
#capacitacion{padding:80px max(56px,calc((100vw - 1240px) / 2)) 80px 56px !important}
#clientes{padding:72px 0 !important;border-top:1px solid #E3E7EE !important;border-bottom:1px solid #E3E7EE !important}
#clientes > div:first-child{padding:0 max(56px,calc((100% - 1240px) / 2)) !important}
.simtxt{padding:64px max(56px,calc((100vw - 1240px) / 2)) 64px 56px !important}
.covwrap{gap:0 !important}
.cov{border-radius:0 !important}
.cov:first-child{padding:56px 48px 0 max(56px,calc((100vw - 1240px) / 2)) !important}
.cov:last-child{padding:48px max(56px,calc((100vw - 1240px) / 2)) 48px 48px !important}
#contacto > div:last-child{padding:80px max(56px,calc((100% - 1240px) / 2)) !important}
footer.foot{padding:72px max(56px,calc((100% - 1240px) / 2)) 100px !important}

/* placas: esquinas rectas, recorte de señalética y filo naranja */
#servicios .card{border-radius:4px !important;border-top:4px solid #F7934F;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
#servicios .card:hover{box-shadow:none;border-top-color:#172B4D}
.ico{border-radius:4px !important}
.chip{border-radius:4px !important}
.ggrid figure{border-radius:4px !important}
.ggrid figcaption{border-radius:2px !important;font-size:12px !important;letter-spacing:.08em;text-transform:uppercase;border-left:4px solid #F7934F}
.zoom{border-radius:4px !important}
.faq details{border-radius:4px !important}
.faq .plus{border-radius:4px !important}
.logo-tile{border-radius:4px !important}
.tab{border-radius:4px !important}
form{border-radius:6px !important;border-top:4px solid #F7934F}
input,select,textarea{border-radius:4px !important}
a.btn,button.btn:not([aria-label*="video"]){border-radius:6px !important}
#inicio img.float{border-radius:6px !important}
#inicio .in[style*="position: absolute"]{border-radius:8px !important}
.cookie{border-radius:8px !important}
.modal{border-radius:8px !important}

/* celular */
@media (max-width: 760px){
  nav[aria-label="Principal"] .navlink{display:none}
  .logo{height:60px !important}
  #servicios,#extintores,#capacitacion,#trabajos,#faq,.proc{padding:44px 22px !important}
  #inicio > div:first-child{padding:40px 22px 32px !important}
  #clientes{padding:44px 0 !important}
  #clientes > div:first-child{padding:0 22px !important}
  #contacto > div:last-child{padding:40px 22px !important}
  .simtxt{padding:36px 22px !important}
  .cov:first-child{padding:40px 22px 0 !important}
  .cov:last-child{padding:36px 22px 32px !important}
  footer.foot{padding:40px 22px 100px !important}
}

/* clientes */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.track{display:flex;gap:16px;width:max-content;animation:marq 45s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 8px))}}
.logo-tile{flex:none;width:210px;height:120px;box-sizing:border-box;padding:18px 22px;background:#FFFFFF;border:1.5px solid #E3E7EE;border-radius:18px;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.logo-tile img{max-width:100%;max-height:80px;object-fit:contain;display:block;border-radius:8px}
.logo-tile:hover{transform:translateY(-4px);border-color:#F7934F;box-shadow:0 12px 28px rgba(10,20,40,.10)}

/* pasos */
.step{position:relative;padding-top:20px}
.step::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:#E3E7EE;border-radius:4px}
.step::after{content:"";position:absolute;left:0;top:0;height:4px;width:28%;background:#F7934F;border-radius:4px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.step:hover::after{width:100%}

/* cobertura */
.sun{animation:sun 6s ease-in-out infinite}
@keyframes sun{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
.ping{transform-box:fill-box;transform-origin:center;animation:ping 2s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
.route{stroke-dasharray:4 5;animation:route 1.6s linear infinite}
@keyframes route{to{stroke-dashoffset:-18}}

/* aparición al hacer scroll */
@supports (animation-timeline: view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
input:focus,select:focus,textarea:focus{outline:none;border-color:#F7934F !important;box-shadow:0 0 0 4px rgba(247,147,79,.2)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}.in,.gaugeok,.done{opacity:1}.chk path{stroke-dashoffset:0}.chk circle{fill:#F7934F;stroke:#F7934F}.bar{width:100%}}

[data-if]{display:contents}
[data-if][hidden],[data-panel][hidden]{display:none !important}