/*================================================== SERVICES ==================================================*/ .services{ position:relative; overflow:hidden; padding-top:clamp(100px,9vw,160px); scroll-margin-top:clamp(80px,5vw,120px); } /*================================================== BACKGROUND ==================================================*/ .services::before{ content:""; position:absolute; inset:0 auto 0 auto; right:clamp(-220px,-10vw,-120px); width:clamp(420px,58vw,850px); height:100%; background:url("../img/services-bg.webp") no-repeat center; background-size:cover; opacity:.92; pointer-events:none; } /*================================================== HEADER ==================================================*/ .services-header{ position:relative; z-index:2; } /*================================================== SECTION TAG ==================================================*/ .section-tag{ display:inline-block; margin-bottom:clamp(8px,1vw,12px); color:#16a34a; font-size:clamp(.78rem,.9vw,.9rem); font-weight:700; letter-spacing:clamp(2px,.35vw,5px); text-transform:uppercase; } /*================================================== TITLE ==================================================*/ .services-header h2{ font-size:clamp(2.2rem,5vw,4.5rem); line-height:1.05; font-weight:800; margin-bottom:clamp(10px,1vw,16px); text-wrap:balance; } .services-header h2 span{ display:block; color:#16a34a; } /*================================================== DESCRIPTION ==================================================*/ .services-header p{ width:min(720px,100%); margin-top:clamp(16px,2vw,20px); font-size:clamp(1rem,1.45vw,1.375rem); line-height:1.75; color:#cfcfcf; } /*================================================== GRID ==================================================*/ .services-grid{ position:relative; z-index:2; display:grid; grid-template-columns: repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:clamp(22px,2.5vw,42px); margin-top:clamp(34px,4vw,48px); } /*================================================== TARJETAS ==================================================*/ .service-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; height:100%; padding:clamp(24px,3vw,42px); border-radius:18px; background:#0a0a0a; border:1px solid rgba(255,255,255,.05); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } /*================================================== LÍNEA SUPERIOR ==================================================*/ .service-card::before{ content:""; position:absolute; left:0; top:0; width:0; height:3px; background:#16a34a; transition:width .40s ease; } /*================================================== NÚMERO GIGANTE ==================================================*/ .service-number{ position:absolute; right:clamp(16px,2vw,22px); top:clamp(14px,2vw,20px); font-size:clamp(56px,7vw,96px); line-height:1; font-weight:800; color:#fff; opacity:.04; pointer-events:none; transition: transform .35s ease, opacity .35s ease; } /*================================================== ICONO ==================================================*/ .service-icon{ position:relative; display:flex; align-items:center; justify-content:center; width:clamp(58px,6vw,82px); height:clamp(58px,6vw,82px); margin-bottom:clamp(20px,3vw,30px); border-radius:50%; color:#16a34a; font-size:clamp(1.6rem,2.2vw,2.15rem); overflow:visible; transition: transform .35s ease, color .35s ease, background .35s ease, box-shadow .35s ease; } .service-icon span{ display:none; } /*================================================== ARO EXTERIOR ==================================================*/ .service-icon::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(22,163,74,.25); transition: transform .45s ease, border-color .45s ease; } /*================================================== ARO INTERIOR ==================================================*/ .service-icon::after{ content:""; position:absolute; inset:clamp(8px,1vw,10px); border-radius:50%; border:1px solid rgba(22,163,74,.45); transition: transform .45s ease, border-color .45s ease; } /*================================================== TÍTULO ==================================================*/ .service-card h3{ font-size:clamp(1.35rem,2.5vw,2.25rem); line-height:1.15; font-weight:800; margin-bottom:clamp(16px,2vw,22px); text-wrap:balance; transition:color .35s ease; } .service-card h3 span{ display:block; color:#16a34a; transition:color .35s ease; } /*================================================== TEXTO ==================================================*/ .service-card p{ margin:0; font-size:clamp(.95rem,1.3vw,1.125rem); line-height:1.8; color:#bdbdbd; } /*================================================== LISTA ==================================================*/ .service-card ul{ margin-top:clamp(18px,2vw,28px); padding:0; list-style:none; } /*================================================== ELEMENTOS ==================================================*/ .service-card li{ position:relative; padding-left:22px; margin-bottom:clamp(10px,1vw,14px); font-size:clamp(.92rem,1.15vw,1rem); line-height:1.7; color:#d8d8d8; } /*================================================== BULLET ==================================================*/ .service-card li::before{ content:""; position:absolute; left:0; top:.72em; width:8px; height:8px; border-radius:50%; background:#16a34a; transform:translateY(-50%); } /*================================================== HOVER ==================================================*/ .service-card:hover{ transform: translateY(clamp(-8px,-1vw,-12px)) scale(1.015); border-color:rgba(22,163,74,.45); box-shadow: 0 clamp(14px,2vw,18px) clamp(30px,4vw,45px) rgba(0,0,0,.45), 0 0 clamp(20px,3vw,30px) rgba(22,163,74,.18); } .service-card:hover::before{ width:100%; } /*================================================== NÚMERO ==================================================*/ .service-card:hover .service-number{ opacity:.08; transform:scale(1.05); } /*================================================== ICONO ==================================================*/ .service-card:hover .service-icon{ transform:scale(1.08); color:#fff; background:#16a34a; box-shadow: 0 0 clamp(16px,2vw,18px) rgba(22,163,74,.35), 0 0 clamp(28px,3vw,35px) rgba(22,163,74,.25); } .service-card:hover .service-icon::before{ transform:rotate(180deg); border-color:#16a34a; } .service-card:hover .service-icon::after{ transform:rotate(-180deg); border-color:rgba(255,255,255,.45); } /*================================================== TITULOS ==================================================*/ .service-card:hover h3{ color:#16a34a; } .service-card:hover h3 span{ color:#fff; } /*================================================== REVEAL ANIMATION ==================================================*/ .reveal{ opacity:0; transform:translateY(clamp(40px,5vw,60px)); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); } .reveal.show{ opacity:1; transform:translateY(0); } /*================================================== DELAY ==================================================*/ .service-card:nth-child(1){ transition-delay:.10s; } .service-card:nth-child(2){ transition-delay:.25s; } .service-card:nth-child(3){ transition-delay:.40s; } /*================================================== AJUSTES FLUIDOS ==================================================*/ .service-card{ min-height:100%; } .service-card>*{ position:relative; z-index:2; } .service-card h3, .service-card p{ text-wrap:balance; } .service-card img, .service-icon svg{ max-width:100%; height:auto; } /*================================================== RESPONSIVE ESTRUCTURAL ==================================================*/ @media (max-width:768px){ .services::before{ opacity:.18; } } @media (max-width:576px){ .services{ scroll-margin-top:80px; } .services-grid{ grid-template-columns:1fr; } }