/* Inmecolsa V4 · estilos de la página "simulador" (generado desde el prototipo) */
/*E4-FONT*/
@font-face{font-family:'Eurostile Ext';src:url('../../fonts/eurostile.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
.e4 h1,.e4 h2,.e4 h3,.e4 h4,.e4 [style*="font-weight: 800"][style*="Sora"]{font-family:'Eurostile Ext',Sora,Arial,sans-serif !important;letter-spacing:0 !important}
.e4 h1{font-size:clamp(28px,3.2vw,46px) !important;line-height:1.12 !important}
.e4 h2[style*="clamp(28px"]{font-size:clamp(22px,2.2vw,32px) !important;line-height:1.18 !important}
.e4 h2[style*="clamp(20px"],.e4 h2[style*="clamp(22px"],.e4 h2[style*="clamp(24px"]{font-size:clamp(18px,1.7vw,24px) !important;line-height:1.25 !important}
.e4 h3{line-height:1.25 !important}
.e4 h3[style*="font-size: 30px"],.e4 h3[style*="font-size: 28px"],.e4 h3[style*="font-size: 26px"]{font-size:22px !important}
.e4 h3[style*="font-size: 24px"],.e4 h3[style*="font-size: 22px"]{font-size:19px !important}
.e4 h3[style*="font-size: 19px"],.e4 h3[style*="font-size: 18px"]{font-size:16px !important}
.e4 h3[style*="font-size: 17px"],.e4 h3[style*="font-size: 16px"],.e4 h3[style*="font-size: 15px"]{font-size:14px !important}
.e4 h3[style*="font-size: 14px"],.e4 h4[style*="font-size: 14px"],.e4 h4[style*="font-size: 15px"]{font-size:12.5px !important}
.e4 [style*="clamp(56px, 7vw, 96px)"]{font-size:clamp(40px,5.2vw,70px) !important}
.e4 [style*="clamp(44px, 5vw, 72px)"]{font-size:clamp(30px,3.4vw,48px) !important}
.e4 [style*="font-size: 300px"]{font-size:220px !important}
/*E4-FONT-END*/
body{margin:0;background:#FFFFFF}
.cf a{color:#1B1B1B}
.cf .mono{font-family:'IBM Plex Mono',monospace}
.cf button{font:inherit;cursor:pointer}
.cf button:focus-visible,.cf input:focus-visible,.cf select:focus-visible,.cf textarea:focus-visible,.cf a:focus-visible{outline:2px solid #E30E12;outline-offset:3px}
.cf .opt{transition:border-color .2s,background .2s,color .2s,transform .2s}
.cf .opt:hover{border-color:#1B1B1B !important;transform:translateY(-1px)}
.cf .tcard{transition:border-color .25s,transform .25s,box-shadow .25s}
.cf .tcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(27,27,27,.10)}
.cf .btn-k{transition:background .25s,gap .25s}
.cf .btn-k:hover{background:#E30E12 !important;gap:18px !important}
.cf .btn-k:hover .sq{background:#FFFFFF !important}
.cf .stp{transition:color .2s}
.cf .stp:hover{color:#E30E12 !important}
.cf input[type=range]{accent-color:#E30E12}
.cf .fld{min-height:48px;padding:0 14px;border:1.5px solid #CFCFCF;background:#FFFFFF;font:inherit;font-size:16px}
.cf .fld:focus{border-color:#E30E12}
.cf .mono{font-family:Sora,Arial,sans-serif !important;font-weight:600;letter-spacing:.08em}
.cf .opt{border-radius:12px}
.cf .tcard{border-radius:18px}
.cf .fld{border-radius:12px;background:#FAFAFA}
.cf .btn-k{background:linear-gradient(135deg,#E30E12 0%,#A50B0E 100%) !important;border-radius:12px;box-shadow:0 14px 30px rgba(227,14,18,.28)}
.cf .btn-k:hover{filter:brightness(1.08)}
.cf .btn-k .sq{background:#FFFFFF !important;border-radius:50%}
.cf .panelbox{border-radius:22px !important;overflow:hidden;border:1px solid #E6E6E8 !important;box-shadow:0 24px 60px rgba(27,27,27,.08)}
.cf .tcard:hover{box-shadow:0 18px 36px rgba(227,14,18,.12) !important}
@keyframes cfping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}

@keyframes cfin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.cf .panel{animation:cfin .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes cfdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.cf .draw{stroke-dasharray:1;animation:cfdraw 1.6s cubic-bezier(.65,0,.25,1) both}
.cf svg path{transition:d .5s cubic-bezier(.2,.7,.2,1)}
@keyframes cfblink{50%{opacity:.2}}
.cf .blink{animation:cfblink 1.6s infinite}
@media (prefers-reduced-motion: reduce){.cf *{animation:none !important;transition:none !important}}
/*E4-IX*/
html,body,.e4{overflow-anchor:none}
.e4-hdr{position:sticky;top:0;z-index:80}
@keyframes e4hdr{to{box-shadow:0 14px 34px rgba(27,27,27,.14)}}
@supports (animation-timeline: scroll()){.e4-hdr{animation:e4hdr linear both;animation-timeline:scroll();animation-range:0 160px}}
.lift{position:relative}
.lift::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#E30E12,#FF5A5D);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:2}
.lift:hover::after{transform:scaleX(1)}
.faq-i{position:relative;outline:none}
.faq-q{cursor:pointer;transition:color .25s,padding-left .35s cubic-bezier(.2,.7,.2,1)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.faq-a>div{overflow:hidden}
.faq-a p{opacity:0;transform:translateY(-6px);transition:opacity .35s .05s,transform .35s .05s}
.faq-i:hover .faq-a,.faq-i:focus-within .faq-a{grid-template-rows:1fr}
.faq-i:hover .faq-a p,.faq-i:focus-within .faq-a p{opacity:1;transform:none}
.faq-i:hover .faq-q,.faq-i:focus-within .faq-q{color:#E30E12;padding-left:16px}
.faq-i::before{content:"";position:absolute;left:0;top:20px;width:3px;height:26px;border-radius:3px;background:#E30E12;transform:scaleY(0);transition:transform .3s}
.faq-i:hover::before,.faq-i:focus-within::before{transform:scaleY(1)}
.faq-plus{transition:transform .35s,background .25s,color .25s,border-color .25s}
.faq-i:hover .faq-plus,.faq-i:focus-within .faq-plus{transform:rotate(45deg);background:#E30E12;color:#FFFFFF !important;border-color:#E30E12 !important}
.chip{transition:border-color .2s,transform .2s,box-shadow .2s}.chip:hover{border-color:#1B1B1B !important;transform:translateY(-2px);box-shadow:0 8px 18px rgba(27,27,27,.08)}
.e4-gal{display:flex;flex-wrap:wrap;gap:12px}
.e4-gal>*{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s,opacity .5s}
.e4-gal:hover>*{filter:grayscale(.7);opacity:.75}
.e4-gal>*:hover{filter:none;opacity:1;transform:scale(1.02)}
.e4-hv{transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s,color .35s,box-shadow .35s,border-color .35s}
.e4-hv:hover{transform:translateY(-6px);background:#1B1B1B !important;color:#FFFFFF !important;box-shadow:0 24px 48px rgba(27,27,27,.18);border-color:#1B1B1B !important}
.e4-hv:hover p,.e4-hv:hover span{color:#D7D7D7 !important}
.e4-hv:hover .e4-hvk{color:#FF5A5D !important}
.e4-cv{counter-reset:n var(--n);animation:e4cv 2.2s cubic-bezier(.2,.7,.2,1) both}
.e4-cv::after{content:counter(n)}
@keyframes e4cv{from{--n:0}to{--n:var(--to)}}
@supports (animation-timeline: view()){.e4-cv{animation-timeline:view();animation-range:entry 10% cover 40%;animation-timing-function:ease-out}}
@keyframes e4in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes e4inx{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.e4-in{animation:e4in .6s cubic-bezier(.2,.7,.2,1) both}
.e4-in2{animation:e4in .6s cubic-bezier(.2,.7,.2,1) .12s both}
.e4-in3{animation:e4in .6s cubic-bezier(.2,.7,.2,1) .24s both}
.e4-inx{animation:e4inx .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes e4bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.e4-pause .e4-bar{animation-play-state:paused !important}
@keyframes e4draw{from{stroke-dashoffset:var(--len,600)}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.e4-cv,.e4-cnt{--n:var(--to,35) !important}}
/*E4-IX-END*/
