.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}:root{ --brand:#01088C; --lavender:#8C8FF6; --lavender-bg:#EEF0FB; --nav:#061B5F; --action:#0057E7;  --accent:#16C7E8; --success:#0B8278;
--success-bg:#E1F3EF;
--warning:#F5A524;
--warning-bg:#FDF0D9;
--error:#D93030;
--error-bg:#FBE6E6; --text:#0B1F4D;
--text-secondary:#60708A;
--bg:#F7F9FC;
--white:#FFFFFF;
--border:#E2E8F0; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-full:999px; } *{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
font-family:'Inter', 'Segoe UI', Arial, sans-serif;
background:var(--bg);
color:var(--text);
font-size:15px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
ul{list-style:none;}
.material-symbols-outlined{
font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
font-size:24px;
line-height:1;
display:inline-block;
} .sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sr-only:focus{
position:fixed; top:8px; left:8px; width:auto; height:auto;
margin:0; overflow:visible; clip:auto; white-space:normal;
background:var(--action); color:var(--white);
padding:10px 16px; border-radius:var(--r-sm); z-index:1000;
}  .reveal{
opacity:0; transform:translateY(26px);
transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
transition-delay:var(--reveal-delay, 0s);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1; transform:none; transition:none;}
} @keyframes heroPhotoZoom{ from{transform:scale(1);} to{transform:scale(1.12);} }
@media(prefers-reduced-motion:reduce){
.hero-directorio::after, .hero-instalador::after, .hero-blog::after{animation:none;}
} .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.section{padding:72px 24px;}
.section-tight{padding:48px 24px;}
@media(max-width:720px){
.section{padding:48px 20px;}
.section-tight{padding:32px 20px;}
}
.eyebrow{
font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--action); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);} .section-head{margin-bottom:36px; max-width:640px;} [id^="section-"]{scroll-margin-top:76px;}
h1,h2,h3,h4{font-weight:700; color:var(--text); letter-spacing:-0.01em;}
h1{font-size:40px; line-height:1.12;}
h2{font-size:28px; line-height:1.2;}
h3{font-size:18px; line-height:1.3;}
p{color:var(--text-secondary);}
.lede{font-size:17px; color:var(--text-secondary); max-width:640px;}
@media(max-width:720px){
h1{font-size:30px;}
h2{font-size:23px;}
} .btn{
display:inline-flex; align-items:center; gap:8px;
padding:12px 20px; border-radius:var(--r-sm);
font-weight:600; font-size:14px; border:1px solid transparent;
transition:opacity .15s ease, background .15s ease;
white-space:nowrap;
}
.btn:hover{opacity:.9;}
.btn-primary{background:var(--action); color:var(--white);}
.btn-outline{background:transparent; color:var(--nav); border-color:var(--border);}
.btn-outline:hover{background:var(--white); opacity:1; border-color:var(--nav);}
.btn-ghost-white{background:transparent; color:var(--white); border-color:rgba(255,255,255,.35);}
.btn-ghost-white:hover{background:rgba(255,255,255,.1); opacity:1;}
.btn-success{background:var(--success); color:var(--white);}
.btn-sm{padding:9px 14px; font-size:13px;}
.btn-block{width:100%; justify-content:center;} .chip{
display:inline-flex; align-items:center; gap:6px;
padding:6px 12px; border-radius:var(--r-full);
font-size:12px; font-weight:700; letter-spacing:.02em;
background:var(--lavender-bg); color:var(--brand);
}
.chip .material-symbols-outlined{font-size:16px;}
.badge-success{background:var(--success-bg); color:var(--success);}
.badge-warning{background:var(--warning-bg); color:var(--warning);}
.badge-error{background:var(--error-bg); color:var(--error);} .cta-banner{
background:var(--nav); border-radius:var(--r-lg); padding:44px;
display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
color:var(--white);
}
.cta-banner h2{color:var(--white); margin-bottom:6px;}
.cta-banner p{color:#B9C3DC;}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap;} .grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){
.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important;}
} header.site{
position:sticky; top:0; z-index:100;
background:var(--white); border-bottom:1px solid var(--border);
transition:box-shadow .2s ease;
}
header.site.is-scrolled{ box-shadow:0 8px 24px rgba(11,31,77,.10); } [id^="section-"]{ scroll-margin-top:88px; }
.nav-inner{
display:flex; align-items:center; justify-content:space-between;
height:72px;
}
.logo-link{display:inline-flex; align-items:center;}
.logo-mark{height:38px; width:auto;}
nav.main-nav{display:flex; align-items:center;}
.nav-menu{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0;}
nav.main-nav .nav-link{
background:none; border:none; font-size:14px; font-weight:600;
color:var(--text-secondary); padding:6px 0; border-bottom:2px solid transparent;
text-decoration:none; display:inline-flex; align-items:center; cursor:pointer; font-family:inherit;
}
nav.main-nav .nav-link:hover{color:var(--text);}
nav.main-nav .nav-link.active{color:var(--brand); border-bottom-color:var(--action);}
.nav-item{position:relative; display:flex; align-items:center;}
.nav-caret{
background:none; border:none; padding:4px; margin-left:-4px; cursor:pointer;
color:var(--text-secondary); display:inline-flex; align-items:center;
}
.nav-caret .material-symbols-outlined{font-size:18px; transition:transform .2s ease;}
.nav-item:hover .nav-caret, .nav-item.open .nav-caret{color:var(--text);}
.nav-item.open .nav-caret .material-symbols-outlined{transform:rotate(180deg);}
.nav-dropdown{
position:absolute; top:calc(100% + 14px); left:0; min-width:190px;
background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
box-shadow:0 12px 28px rgba(11,31,77,.14); padding:8px; margin:0; list-style:none;
opacity:0; visibility:hidden; transform:translateY(4px);
transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
z-index:200;
}
.nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown{
opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dropdown-link{
display:block; padding:9px 12px; border-radius:var(--r-sm); font-size:14px;
font-weight:600; color:var(--text-secondary); text-decoration:none; white-space:nowrap;
}
.nav-dropdown-link:hover{background:var(--lavender-bg); color:var(--brand);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.burger{display:none; background:none; border:none; padding:8px;}
.burger .material-symbols-outlined{color:var(--nav);}
@media(max-width:980px){
nav.main-nav{
position:fixed; top:72px; left:0; right:0; bottom:0;
background:var(--white); align-items:flex-start;
padding:24px; transform:translateX(100%); transition:transform .2s ease;
overflow-y:auto;
}
nav.main-nav.open{transform:translateX(0);}
.nav-menu{flex-direction:column; align-items:flex-start; gap:4px; width:100%;}
nav.main-nav .nav-link{width:100%; padding:14px 4px; border-bottom:1px solid var(--border);}
.nav-item{width:100%; flex-wrap:wrap; justify-content:space-between; border-bottom:1px solid var(--border);}
nav.main-nav .nav-item .nav-link{flex:1; border-bottom:none;}
.nav-caret{padding:14px 4px;}
.nav-dropdown{
position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
border:none; padding:0 0 10px 14px; width:100%; display:none;
}
.nav-item.open .nav-dropdown{display:block;}
.nav-dropdown-link{padding:10px 4px;}
.nav-actions .btn-outline{display:none;}
.burger{display:inline-flex;}
} footer.site{background:var(--nav); color:#C3CCE3; padding:56px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-grid h4{color:var(--white); font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px;}
.footer-grid ul li{margin-bottom:10px; font-size:14px;}
.footer-grid ul li a:hover{color:var(--white);}
.footer-logo{height:52px; margin-bottom:20px;}
.footer-brand-text{color:var(--white);}
.footer-social{display:flex; align-items:center; gap:14px; margin-top:20px;}
.footer-social a{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:50%;
background:rgba(255,255,255,.08); color:var(--white);
transition:background .15s ease, color .15s ease;
}
.footer-social a:hover{background:var(--action); color:var(--white);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:13px; color:#8E9AC0; flex-wrap:wrap; gap:10px;}
.footer-legal{display:flex; gap:24px; flex-wrap:nowrap;}
.footer-legal a:hover{color:var(--white);}
@media(max-width:640px){
.footer-bottom{flex-direction:column; align-items:flex-start;}
.footer-legal{flex-wrap:wrap; gap:8px 20px;}
}
@media(max-width:800px){
.footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
}
@media(max-width:980px){
.footer-grid > *{min-width:0;}
}
@media(max-width:480px){
.footer-grid{grid-template-columns:1fr !important;}
}  .hero-v2{
position:relative; color:var(--white); overflow:hidden;
padding:0;
background:var(--nav) url(https://www.asofrio.com/wp-content/uploads/2026/08/hero-instalador-2.webp) center 30%/cover no-repeat;
min-height:calc(100vh - 72px); min-height:calc(100svh - 72px);
display:flex; align-items:center;
}
.hero-v2::before{
content:''; position:absolute; inset:0;
background-image:
linear-gradient(180deg, rgba(3,12,54,.90) 0%, rgba(6,27,95,.82) 45%, rgba(3,12,54,.94) 100%),
linear-gradient(90deg, rgba(6,27,95,.90) 0%, rgba(6,27,95,.90) 55%, rgba(6,27,95,0) 75%),
radial-gradient(circle at 15% 20%, rgba(140,143,246,.30), transparent 45%),
radial-gradient(circle at 85% 15%, rgba(22,199,232,.26), transparent 40%),
radial-gradient(circle at 60% 90%, rgba(0,87,231,.30), transparent 45%);
}
.hero-v2::after{
content:''; position:absolute; inset:0; opacity:.5;
background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
background-size:22px 22px;
mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%);
}
.hero-v2-inner{position:relative; z-index:1; width:100%; padding:clamp(40px,8vh,108px) 24px;}
.hero-v2-eyebrow{
display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px;
border:1px solid rgba(255,255,255,.28); border-radius:var(--r-full);
font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
color:var(--white); background:rgba(255,255,255,.08); margin-bottom:clamp(16px,3vh,26px);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-v2-eyebrow .material-symbols-outlined{font-size:15px; color:var(--accent);}
.hero-v2-title{
color:var(--white); font-size:clamp(32px, 3.4vw + 1.6vh, 68px); line-height:1.06; letter-spacing:-.02em;
max-width:900px; font-weight:700; display:block;
text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.hero-v2-title em{ font-style:normal; color:var(--accent); }
.hero-v2 .lede{
color:#DCE2F2; font-size:clamp(15px, .5vw + .9vh, 19px); max-width:600px; margin-top:clamp(14px,2.5vh,24px);
text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.hero-v2-ctas{display:flex; gap:14px; margin-top:clamp(20px,4vh,36px); flex-wrap:wrap;}
.btn-lg{padding:15px 26px; font-size:15px; border-radius:var(--r-sm);}
.hero-v2-stats{
display:flex; gap:0; margin-top:clamp(28px,6vh,68px); flex-wrap:wrap;
border-top:1px solid rgba(255,255,255,.15); padding-top:clamp(16px,3vh,30px);
}
.hero-v2-stats .stat{padding-right:48px; margin-right:48px; border-right:1px solid rgba(255,255,255,.15);}
.hero-v2-stats .stat:last-child{border-right:none;}
.hero-v2-stats .stat .num{font-size:clamp(22px, 1.6vw + 1vh, 34px); font-weight:700; color:var(--white); line-height:1;}
.hero-v2-stats .stat .lbl{font-size:13px; color:#9AA7CC; margin-top:8px; font-weight:600;}
@media(max-width:720px){
.hero-v2::before{
background-image:
linear-gradient(180deg, rgba(3,12,54,.90) 0%, rgba(6,27,95,.82) 45%, rgba(3,12,54,.94) 100%),
radial-gradient(circle at 15% 20%, rgba(140,143,246,.30), transparent 45%),
radial-gradient(circle at 85% 15%, rgba(22,199,232,.26), transparent 40%),
radial-gradient(circle at 60% 90%, rgba(0,87,231,.30), transparent 45%);
}
.hero-v2-stats .stat{padding-right:28px; margin-right:28px;}
.hero-v2-stats .stat .num{font-size:26px;}
.hero-v2-stats{display:none;}
} #section-inicio.hero-v2::before{
background-image:none;
background-color:rgba(6,27,95,.85);
}
.hero-ctas{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;} .intro-card{
background:var(--white); border:1px solid var(--border); border-radius:18px;
padding:36px 30px; box-shadow:0 1px 3px rgba(11,31,77,.06);
transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
display:flex; flex-direction:column;
}
.intro-card:hover{
box-shadow:0 18px 40px rgba(1,8,140,.16); transform:translateY(-4px); border-color:transparent;
}
.intro-card-icon{
width:56px; height:56px; border-radius:14px;
display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.intro-card-icon .material-symbols-outlined{font-size:26px; color:#fff;}
.intro-card:nth-child(1) .intro-card-icon{background:linear-gradient(135deg, var(--brand), var(--nav));}
.intro-card:nth-child(2) .intro-card-icon{background:linear-gradient(135deg, var(--action), var(--brand));}
.intro-card:nth-child(3) .intro-card-icon{background:linear-gradient(135deg, var(--accent), var(--action));}
.intro-card h3{color:var(--text); font-size:19px; margin-bottom:10px; line-height:1.3;}
.intro-card p{color:var(--text-secondary); line-height:1.65; font-size:14.5px; flex:1;}
.intro-card-cta{
display:inline-flex; align-items:center; gap:6px; margin-top:22px;
background:none; border:none; padding:0; font-size:14px; font-weight:700;
color:var(--action); cursor:pointer; text-decoration:none; align-self:flex-start; font-family:inherit;
}
.intro-card-cta .material-symbols-outlined{font-size:18px; transition:transform .2s ease;}
.intro-card-cta:hover .material-symbols-outlined{transform:translateX(4px);}
.intro-card-cta:hover{color:var(--brand);} .audience-panels{
display:flex; gap:6px; height:520px; border-radius:20px; overflow:hidden;
}
.audience-panel{
position:relative; flex:1; min-width:64px; cursor:pointer;
transition:flex .55s cubic-bezier(.22,.61,.36,1);
overflow:hidden;
}
.audience-panel:hover, .audience-panel:focus-within{ flex:2.3; }
.audience-panel-bg{
position:absolute; inset:0; background-size:cover; background-position:center;
transform:scale(1.08); transition:transform .8s ease;
}
.audience-panel:hover .audience-panel-bg{ transform:scale(1); }
.audience-panel-overlay{
position:absolute; inset:0;
background:linear-gradient(0deg, rgba(1,8,45,.98) 0%, rgba(1,8,60,.88) 24%, rgba(1,8,80,.4) 55%, rgba(1,8,80,0) 85%);
}
.audience-panel-content{
position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
padding:26px 22px; color:#fff;
}
.audience-panel-heading{ display:flex; align-items:center; gap:14px; }
.audience-panel-icon{
width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.audience-panel-icon .material-symbols-outlined{ font-size:22px; color:#fff; }
.audience-panel h3{ color:#fff; font-size:22px; white-space:nowrap; }
.audience-panel-detail{
max-height:0; opacity:0; overflow:hidden; margin-top:12px;
transition:max-height .5s ease, opacity .4s ease;
}
.audience-panel:hover .audience-panel-detail, .audience-panel:focus-within .audience-panel-detail{
max-height:160px; opacity:1;
}
.audience-panel-detail p{ color:rgba(255,255,255,.88); font-size:14px; line-height:1.6; }
.audience-panel-cta{
display:flex; align-items:center; gap:4px; margin-top:14px;
background:none; border:none; padding:0; cursor:pointer;
color:#fff; font-weight:700; font-size:13px; text-decoration:none;
}
.audience-panel-cta + .audience-panel-cta{ margin-top:8px; }
.audience-panel-cta .material-symbols-outlined{ font-size:16px; }
.audience-panel-cta:hover{ text-decoration:underline; }
@media(max-width:860px){
.audience-panels{ flex-direction:column; height:auto; }
.audience-panel{ flex:none !important; height:280px; }
.audience-panel:active .audience-panel-detail{ opacity:1; max-height:160px; }
.audience-panel-bg{ transform:scale(1) !important; }
} @media(max-width:860px){
.audience-panels--stacked-mobile{ gap:12px; }
.audience-panels--stacked-mobile .audience-panel-content{
justify-content:center; padding:0 20px;
}
.audience-panels--stacked-mobile .audience-panel-heading{ margin-bottom:0; }
.audience-panels--stacked-mobile .audience-panel-heading h3{ white-space:normal; }
.audience-panels--stacked-mobile .audience-panel-detail p,
.audience-panels--stacked-mobile .audience-panel-list{
display:none;
}
.audience-panels--stacked-mobile .audience-panel-detail{
max-height:none; opacity:1; overflow:visible; margin-top:8px;
}
.audience-panels--stacked-mobile .audience-panel:active .audience-panel-detail{
max-height:none; opacity:1;
}
} .audience-panel-list{
margin:12px 0 0; padding:0; list-style:none;
display:flex; flex-direction:column; gap:6px;
}
.audience-panel-list li{
position:relative; padding-left:16px;
font-size:13px; color:rgba(255,255,255,.88); line-height:1.5;
}
.audience-panel-list li::before{
content:''; position:absolute; left:0; top:8px;
width:5px; height:5px; border-radius:50%; background:var(--accent);
} .video-card{
position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
box-shadow:0 1px 3px rgba(11,31,77,.06);
transition:box-shadow .2s ease, transform .2s ease;
will-change:transform;
}
.video-card:hover{ box-shadow:0 14px 32px rgba(1,8,140,.14); }
.video-poster-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.video-card-shade{
position:absolute; inset:0;
background:linear-gradient(0deg, rgba(1,8,45,.5) 0%, rgba(1,8,45,.05) 45%, rgba(1,8,45,.25) 100%);
transition:opacity .3s ease;
}
.video-card:hover .video-card-shade{ opacity:.75; }
.video-play-btn{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:80px; height:80px; border-radius:50%;
background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
border:1.5px solid rgba(255,255,255,.6);
display:flex; align-items:center; justify-content:center;
transition:transform .25s ease, background .25s ease;
}
.video-card:hover .video-play-btn{ transform:translate(-50%,-50%) scale(1.08); background:rgba(255,255,255,.26); }
.video-play-btn .material-symbols-outlined{ font-size:32px; color:#fff; margin-left:4px; }
.video-play-ripple{
position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.6);
animation:videoRipple 2.6s ease-out infinite;
}
.video-play-ripple.delay{ animation-delay:1.3s; }
@keyframes videoRipple{
0%{ transform:scale(1); opacity:.7; }
100%{ transform:scale(1.9); opacity:0; }
}
.video-card.is-playing .video-play-btn,
.video-card.is-playing .video-play-ripple,
.video-card.is-playing .video-card-shade{ display:none; }
.video-card.is-playing{ cursor:default; box-shadow:0 1px 3px rgba(11,31,77,.06); }
.video-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .market-stats{
position:relative; color:var(--white); overflow:hidden;
background:var(--nav) url(//www.asofrio.com/wp-content/themes/asofrio/assets/images/refrigeracion.webp) center 35%/cover no-repeat;
min-height:clamp(520px,72vh,760px);
display:flex; align-items:center;
}
.market-stats::before{
content:''; position:absolute; inset:0;
background:linear-gradient(to left, rgba(1,8,60,.92) 0%, rgba(1,8,60,.70) 100%, rgba(1,8,60,.28) 100%);
}
.market-stats .eyebrow{color:var(--accent); justify-content:center;}
.market-stats-inner{position:relative; z-index:1;}
.market-stats-head{text-align:center; max-width:560px; margin:0 auto clamp(36px,6vh,56px);}
.market-stats-head h2{color:var(--white);}
.market-stats-head p{color:#DCE2F2; margin-top:8px;}
.market-stats-grid{display:flex; justify-content:center; align-items:flex-start; flex-wrap:nowrap;}
.market-stat{padding:0 clamp(10px,1.8vw,28px); text-align:center; border-right:1px solid rgba(255,255,255,.18); flex:1 1 0; min-width:0;}
.market-stat:last-child{border-right:none;}
.market-stat .num{
font-size:clamp(22px, 1.6vw + 1.2vh, 44px); font-weight:700; color:var(--white); line-height:1;
font-variant-numeric:tabular-nums; white-space:nowrap;
}
.market-stat .lbl{font-size:12.5px; color:#9AA7CC; margin-top:10px; font-weight:600; line-height:1.4; min-height:2.8em;}
@media(max-width:720px){
.market-stats{
min-height:0;
padding:48px 0 40px;
}
.market-stats .scroll-hint{
display:none;
}
.market-stats-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
row-gap:28px;
}
.market-stat{
flex:0 1 33.333%;
max-width:33.333%;
padding:0 10px;
border-right:none;
} .market-stat:not(:nth-child(3n)):not(:last-child){
border-right:1px solid rgba(255,255,255,.18);
}
.market-stat .num{font-size:26px;}
.market-stat .lbl{font-size:11px; white-space:normal; min-height:2.6em;}
} .marquee-wrap{
max-width:1180px; margin:0 auto; overflow:hidden; position:relative; padding:44px 0;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
} .marquee-track{
display:flex; gap:24px; width:max-content;
touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
}
.marquee-track.is-dragging{ cursor:grabbing; }
.marquee-track img{ -webkit-user-drag:none; user-drag:none; }
.member-logo-tile,
.supplier-logo-tile{
flex:0 0 auto; width:150px; height:76px; display:flex; align-items:center; justify-content:center;
padding:0 10px;
}
.member-logo-tile img,
.supplier-logo-tile img{
max-width:100%; max-height:100%; object-fit:contain;
}
@media (max-width: 640px) {
.member-logo-tile,
.supplier-logo-tile {
width: min(78vw, 280px);
height: 92px;
padding: 0 16px;
}
.marquee-track {
gap: 16px;
}
} .post-card{display:block; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; cursor:pointer; transition:border-color .15s ease, transform .15s ease; text-decoration:none;}
.post-card:hover{border-color:var(--action); transform:translateY(-2px);}
.post-thumb{ height:150px; position:relative; overflow:hidden; }
.post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-thumb--icon{
background:var(--nav);
display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85);
}
.post-thumb--icon .material-symbols-outlined{font-size:40px;}
.post-thumb--icon::after{
content:''; position:absolute; inset:0;
background:radial-gradient(circle at 75% 30%, rgba(22,199,232,.35), transparent 55%);
}
.post-body{padding:18px;}
.post-meta{font-size:12px; color:var(--text-secondary); margin-top:10px; display:flex; gap:10px; align-items:center;} .review-card{
background:#ffffff; border:1px solid var(--border); border-radius:16px;
padding:32px 28px; box-shadow:0 1px 3px rgba(11,31,77,.06);
transition:box-shadow .2s ease, transform .2s ease;
display:flex; flex-direction:column; height:100%;
}
.review-card:hover{ box-shadow:0 14px 32px rgba(1,8,140,.14); transform:translateY(-2px); }
.review-stars{ display:flex; gap:2px; margin-bottom:16px; }
.review-stars .material-symbols-outlined{ font-size:18px; color:#F5A524; font-variation-settings:'FILL' 1; }
.review-quote{ color:var(--text); font-size:15px; line-height:1.65; flex:1; }
.review-author{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.review-avatar{
width:44px; height:44px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:var(--brand); color:#fff; font-weight:700; font-size:15px;
}
.review-author-name{ font-weight:700; font-size:14px; color:var(--text); }
.review-author-role{ font-size:12.5px; color:var(--text-secondary); margin-top:2px; } .installer-map{
position:relative; min-height:420px; height:100%; border-radius:16px; overflow:hidden; border:1px solid var(--border);
background:#1B2036 url(//www.asofrio.com/wp-content/themes/asofrio/assets/images/mapa.png) center/cover no-repeat;
}
.map-badge{
position:absolute; top:16px; left:16px; background:var(--white); border-radius:var(--r-full);
padding:8px 16px; font-size:12.5px; font-weight:700; color:var(--brand);
box-shadow:0 4px 14px rgba(1,8,140,.14); display:flex; align-items:center; gap:6px;
}
.map-badge .material-symbols-outlined{ font-size:16px; color:var(--action); } .jobs-control-btn{
width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:#fff;
display:flex; align-items:center; justify-content:center; color:var(--brand); cursor:pointer;
transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.jobs-control-btn:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }  .jobs-control-btn:disabled{ cursor:default; opacity:.4; } .faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item:first-child{ border-top:1px solid var(--border); }
.faq-question{
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:22px 4px; cursor:pointer; list-style:none;
font-weight:700; font-size:16px; color:var(--text);
}
.faq-question::-webkit-details-marker{ display:none; }
.faq-question .material-symbols-outlined{ color:var(--brand); transition:transform .25s ease; flex-shrink:0; }
.faq-item[open] .faq-question .material-symbols-outlined{ transform:rotate(45deg); }
.faq-answer{ padding:0 4px 22px; color:var(--text-secondary); font-size:14.5px; line-height:1.65; max-width:640px; } @media(max-width:980px){
.grid > *,
.audience-panels > *,
.hero-v2-inner > *{
min-width:0;
}
.jobs-control-btn{width:44px; height:44px;}
} @media(max-width:720px){
#section-blog .grid-3,
#section-resenas .grid-3{
display:flex; flex-wrap:nowrap; gap:16px !important;
overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
padding-bottom:6px; scrollbar-width:none;
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%);
mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%);
}
#section-blog .grid-3::-webkit-scrollbar,
#section-resenas .grid-3::-webkit-scrollbar{ display:none; }
#section-blog .grid-3 > .post-card,
#section-resenas .grid-3 > .review-card{
flex:0 0 86%; scroll-snap-align:start;
}
.scroll-hint{
display:flex; align-items:center; gap:6px;
font-size:12.5px; font-weight:700; color:var(--brand);
margin:-6px 0 16px;
}
.scroll-hint .material-symbols-outlined{font-size:18px;}
}
.scroll-hint{display:none;} .card{
background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
padding:24px;
}
.icon-tile{
width:48px; height:48px; border-radius:var(--r-md);
background:var(--lavender-bg); color:var(--brand);
display:flex; align-items:center; justify-content:center;
margin-bottom:16px;
}
.icon-tile.cyan{background:#E3FAFD; color:#0B7E92;} .panel{
background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
overflow:hidden; box-shadow:0 1px 2px rgba(11,31,77,.04);
}
.panel-head{
background:var(--nav); color:var(--white); padding:14px 18px;
display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
}
.panel-head .material-symbols-outlined{font-size:18px; color:var(--accent);}
.panel-body{padding:20px;} .stat .num{font-size:32px; font-weight:700; color:var(--brand);}
.stat .lbl{font-size:13px; color:var(--text-secondary); font-weight:600; margin-top:4px;} .timeline{border-left:2px solid var(--border); padding-left:24px; display:flex; flex-direction:column; gap:28px; margin-left:6px;}
.timeline .item{position:relative;}
.timeline .item::before{
content:''; position:absolute; left:-30px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--action); border:3px solid var(--lavender-bg);
}
.timeline .yr{font-family:'Inter'; font-weight:700; color:var(--brand); font-size:13px; letter-spacing:.04em;} .field{margin-bottom:8px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text);}
.field input, .field select, .field textarea{
width:100%; border:1px solid var(--border); border-radius:var(--r-sm);
padding:11px 13px; font-size:14px; font-family:inherit; color:var(--text); background:var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus{
outline:2px solid var(--action); outline-offset:1px; border-color:var(--action);
}
.field textarea{resize:vertical; min-height:110px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:600px){.field-row{grid-template-columns:1fr;}}
.field-check{display:flex; align-items:flex-start; gap:10px; margin-bottom:8px;}
.field-check input{margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--action);}
.field-check label{font-size:12.5px; color:var(--text-secondary); line-height:1.55;}
.field-check a{color:var(--action); font-weight:600;} .value-item{
background:#ffffff; border:1px solid var(--border); border-radius:16px;
box-shadow:0 1px 3px rgba(11,31,77,.06);
transition:box-shadow .2s ease, transform .2s ease;
padding:32px 28px;
}
.value-item:hover{
box-shadow:0 14px 32px rgba(1,8,140,.14);
transform:translateY(-2px);
}
.value-item .icon-badge{
width:52px; height:52px; border-radius:50%;
background:var(--brand);
display:flex; align-items:center; justify-content:center;
margin-bottom:18px;
}
.value-item .icon-badge .material-symbols-outlined{
color:#ffffff; font-size:24px;
}
.value-item h3{
color:var(--text); font-size:16.5px; margin-bottom:8px;
}
.value-item p{
color:var(--text-secondary); line-height:1.6; font-size:14px;
} .job-card{
border:1px solid var(--border); border-radius:16px; padding:20px 22px;
display:flex; gap:16px; align-items:flex-start; background:#fff;
box-sizing:border-box; margin-bottom:16px; overflow:hidden;
}
.job-icon{
width:44px; height:44px; border-radius:50%; background:var(--lavender-bg);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.job-icon .material-symbols-outlined{ color:var(--brand); font-size:22px; }
.job-label{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--action); }
.job-card h3{
font-size:16px; font-weight:700; color:var(--text); margin-top:5px;
text-transform:none; letter-spacing:normal; line-height:1.35;
}
.job-desc{
font-size:13.5px; color:var(--text-secondary); line-height:1.55; margin-top:5px;
display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.job-date{ display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:12px; color:var(--text-secondary); }
.job-date .material-symbols-outlined{ font-size:14px; } .hero-directorio{
--hero-photo:url(//www.asofrio.com/wp-content/themes/asofrio/assets/images/tecnica-stats.png);
position:relative; overflow:hidden; color:var(--white);
padding:clamp(64px,12vh,128px) 0 clamp(56px,10vh,104px);
} .hero-directorio::after{
content:''; position:absolute; inset:0; z-index:-1;
background:var(--nav) var(--hero-photo) center 35%/cover no-repeat;
animation:heroPhotoZoom 22s ease-out forwards;
}
.hero-directorio::before{
content:''; position:absolute; inset:0;
background-image:
linear-gradient(180deg, rgba(3,12,54,.88) 0%, rgba(6,27,95,.82) 45%, rgba(3,12,54,.93) 100%),
radial-gradient(circle at 18% 20%, rgba(140,143,246,.28), transparent 45%),
radial-gradient(circle at 85% 85%, rgba(22,199,232,.22), transparent 45%);
}
.hero-directorio-inner{ position:relative; z-index:1; max-width:640px; }
.hero-directorio-eyebrow{
display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px;
border:1px solid rgba(255,255,255,.28); border-radius:var(--r-full);
font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--white); background:rgba(255,255,255,.08); margin-bottom:20px;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-directorio-eyebrow .material-symbols-outlined{font-size:15px; color:var(--accent);}
.hero-directorio-title{
font-size:clamp(30px, 2.8vw + 1.2vh, 48px); line-height:1.1; letter-spacing:-.02em; color:var(--white);
font-weight:700; text-shadow:0 4px 24px rgba(0,0,0,.3); display:block;
}
.hero-directorio-title em{ font-style:normal; color:var(--accent); }
.hero-directorio .lede{
color:#DCE2F2; font-size:clamp(15px,.4vw + .8vh,17px); margin-top:18px;
}
.hero-directorio-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; } .hero-empleo{
--hero-photo:url(//www.asofrio.com/wp-content/themes/asofrio/assets/images/empleo-asofrio.webp);
position:relative; overflow:hidden; color:var(--white);
padding:clamp(64px,12vh,128px) 0 clamp(56px,10vh,104px);
} .hero-empleo::after{
content:''; position:absolute; inset:0; z-index:-1;
background:var(--nav) var(--hero-photo) center 35%/cover no-repeat;
animation:heroPhotoZoom 22s ease-out forwards;
}
.hero-empleo::before{
content:''; position:absolute; inset:0;
background-image:
linear-gradient(180deg, rgba(3,12,54,.88) 0%, rgba(6,27,95,.82) 45%, rgba(3,12,54,.93) 100%),
radial-gradient(circle at 18% 20%, rgba(140,143,246,.28), transparent 45%),
radial-gradient(circle at 85% 85%, rgba(22,199,232,.22), transparent 45%);
}
.hero-empleo-inner{ position:relative; z-index:1; max-width:640px; }
.hero-empleo-eyebrow{
display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px;
border:1px solid rgba(255,255,255,.28); border-radius:var(--r-full);
font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--white); background:rgba(255,255,255,.08); margin-bottom:20px;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-empleo-eyebrow .material-symbols-outlined{font-size:15px; color:var(--accent);}
.hero-empleo-title{
font-size:clamp(30px, 2.8vw + 1.2vh, 48px); line-height:1.1; letter-spacing:-.02em; color:var(--white);
font-weight:700; text-shadow:0 4px 24px rgba(0,0,0,.3); display:block;
}
.hero-empleo-title em{ font-style:normal; color:var(--accent); }
.hero-empleo .lede{
color:#DCE2F2; font-size:clamp(15px,.4vw + .8vh,17px); margin-top:18px;
}
.hero-empleo-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; } .partner-card{
background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
padding:24px 20px; display:flex; flex-direction:column; align-items:center; gap:16px;
text-align:center; transition:box-shadow .2s ease, transform .2s ease;
}
.partner-card:hover{ box-shadow:0 10px 24px rgba(1,8,140,.10); transform:translateY(-2px); }
.partner-card-logo{ width:100%; height:88px; display:flex; align-items:center; justify-content:center; }
.partner-card-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.partner-card h4{ font-size:14px; color:var(--text); }
.partner-logo-placeholder{
width:100%; height:100%; border-radius:var(--r-sm);
background:var(--lavender-bg); color:var(--brand);
display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:15px; letter-spacing:.02em;
} .quality-seal-frame{ display:flex; align-items:center; justify-content:center; }
.quality-seal-frame img{ max-width:280px; width:100%; } .tone-grid,
.refrigerant-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px; }
@media(max-width:600px){
.tone-grid,
.refrigerant-grid{ grid-template-columns:1fr; }
}
.tone-card,
.refrigerant-card{
border-radius:18px; padding:28px 26px; display:flex; flex-direction:column;
transition:transform .2s ease, box-shadow .2s ease;
}
.tone-card:hover,
.refrigerant-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(1,8,140,.12); }
.tone-icon,
.refrigerant-icon{
width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
margin-bottom:16px;
}
.tone-icon .material-symbols-outlined,
.refrigerant-icon .material-symbols-outlined{ font-size:24px; color:#fff; }
.tone-badge,
.refrigerant-badge{
display:inline-flex; align-self:flex-start; padding:4px 10px; border-radius:var(--r-full);
font-size:11px; font-weight:700; letter-spacing:.02em; margin-bottom:12px; color:#fff;
}
.tone-card h3,
.refrigerant-card h3{ font-size:17px; margin-bottom:8px; color:var(--text); }
.tone-card p,
.refrigerant-card p{ font-size:13.5px; color:var(--text-secondary); line-height:1.65; }
.tone-card--green{ background:var(--success-bg); }
.tone-card--green .tone-icon, .tone-card--green .tone-badge{ background:var(--success); }
.tone-card--cyan{ background:#E3FAFD; }
.tone-card--cyan .tone-icon, .tone-card--cyan .tone-badge{ background:var(--accent); }
.tone-card--cyan .tone-badge{ color:#04424B; }
.tone-card--amber{ background:var(--warning-bg); }
.tone-card--amber .tone-icon, .tone-card--amber .tone-badge{ background:var(--warning); }
.tone-card--lavender{ background:var(--lavender-bg); }
.tone-card--lavender .tone-icon, .tone-card--lavender .tone-badge{ background:var(--lavender); }
.refrigerant-card--co2{ background:var(--success-bg); }
.refrigerant-card--co2 .refrigerant-icon, .refrigerant-card--co2 .refrigerant-badge{ background:var(--success); }
.refrigerant-card--r290{ background:#E3FAFD; }
.refrigerant-card--r290 .refrigerant-icon, .refrigerant-card--r290 .refrigerant-badge{ background:var(--accent); }
.refrigerant-card--r290 .refrigerant-badge{ color:#04424B; }
.refrigerant-card--amoniaco{ background:var(--warning-bg); }
.refrigerant-card--amoniaco .refrigerant-icon, .refrigerant-card--amoniaco .refrigerant-badge{ background:var(--warning); }
.refrigerant-card--a2l{ background:var(--lavender-bg); }
.refrigerant-card--a2l .refrigerant-icon, .refrigerant-card--a2l .refrigerant-badge{ background:var(--lavender); } .hero-instalador{
--hero-photo:url(//www.asofrio.com/wp-content/themes/asofrio/assets/images/servicios-asofrio.webp);
position:relative; overflow:hidden;
padding:clamp(48px,9vh,96px) 0 clamp(56px,10vh,108px);
}
.hero-instalador::after{
content:''; position:absolute; inset:0; z-index:-1;
background:var(--bg) var(--hero-photo) center/cover no-repeat;
animation:heroPhotoZoom 22s ease-out forwards;
}
.hero-instalador::before{
content:''; position:absolute; inset:0;
background-image:
linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 32%, rgba(238,240,251,.72) 58%, rgba(238,240,251,.40) 100%);
}
.hero-instalador-inner{
position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
gap:clamp(32px,5vw,64px); align-items:center;
}
.hero-instalador-eyebrow{
display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px;
border:1px solid var(--border); border-radius:var(--r-full);
font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--brand); background:var(--white); margin-bottom:20px;
}
.hero-instalador-eyebrow .material-symbols-outlined{font-size:15px; color:var(--action);}
.hero-instalador-title{
font-size:clamp(30px, 2.6vw + 1.2vh, 50px); line-height:1.1; letter-spacing:-.02em; color:var(--brand); font-weight:700; display:block;
}
.hero-instalador-title em{ font-style:normal; color:var(--action); }
.hero-instalador .lede{
color:#4A5B8C; font-size:clamp(15px,.4vw + .8vh,17px); max-width:520px; margin-top:18px;
}
.hero-instalador-ctas{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-instalador-media{ position:relative; }
.hero-instalador-media-frame{
border-radius:24px; overflow:hidden; box-shadow:0 24px 60px rgba(1,8,140,.20);
aspect-ratio:4/3; border:1px solid var(--white);
}
.hero-instalador-media-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-instalador-badge{
position:absolute; left:24px; bottom:-26px; z-index:2;
background:var(--white); border-radius:var(--r-full); padding:10px 20px 10px 10px;
box-shadow:0 14px 32px rgba(1,8,140,.18); display:flex; align-items:center; gap:12px;
}
.hero-instalador-avatars{ display:flex; flex-shrink:0; }
.hero-instalador-avatars span{
width:34px; height:34px; border-radius:50%; background:var(--lavender-bg); color:var(--brand);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
border:2px solid var(--white); margin-left:-10px;
}
.hero-instalador-avatars span:first-child{ margin-left:0; }
.hero-instalador-avatars span.more{ background:var(--action); color:var(--white); font-size:11px; }
.hero-instalador-badge-text{ display:flex; flex-direction:column; }
.hero-instalador-badge-text strong{ font-size:13.5px; color:var(--text); line-height:1.25; }
.hero-instalador-badge-text span{ font-size:12px; color:var(--text-secondary); }
@media(max-width:900px){
.hero-instalador-inner{ grid-template-columns:1fr; }
.hero-instalador-media{ order:-1; }
}
@media(max-width:560px){
.hero-instalador-badge{ left:12px; bottom:-20px; padding:8px 16px 8px 8px; }
} .intranet-section{
position:relative; overflow:hidden; color:var(--white);
background:
linear-gradient(160deg, rgba(6,27,95,.94) 0%, rgba(8,31,114,.90) 55%, rgba(6,27,95,.96) 100%),
var(--nav) url(//www.asofrio.com/wp-content/themes/asofrio/assets/images/slider.png) center/cover no-repeat;
padding:clamp(56px,9vh,100px) 0;
}
.intranet-section::before{
content:''; position:absolute; top:-140px; left:-120px; width:460px; height:460px;
background:radial-gradient(circle, rgba(140,143,246,.30), transparent 68%); border-radius:50%; pointer-events:none;
}
.intranet-section::after{
content:''; position:absolute; bottom:-160px; right:-140px; width:480px; height:480px;
background:radial-gradient(circle, rgba(22,199,232,.22), transparent 68%); border-radius:50%; pointer-events:none;
}
.intranet-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.intranet-section .eyebrow{ color:var(--accent); }
.intranet-section h2{ color:var(--white); }
.intranet-section .lede{ color:#DCE2F2; margin-top:14px; max-width:480px; }
.intranet-list{ display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.intranet-list li{ display:flex; align-items:flex-start; gap:14px; }
.intranet-list li .material-symbols-outlined{
font-size:17px; color:var(--accent); background:rgba(255,255,255,.1); border-radius:50%; padding:5px; flex-shrink:0;
}
.intranet-item{ display:flex; flex-direction:column; gap:4px; }
.intranet-item-title{ font-size:15px; font-weight:700; color:#fff; }
.intranet-item p{ margin:0; font-size:14px; color:#DCE2F2; line-height:1.55; }
.intranet-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
@media(max-width:900px){
.intranet-inner{ grid-template-columns:1fr; }
} .intranet-shots{
position:relative;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
}
.intranet-shot{
position:absolute;
max-width:88%;
border-radius:var(--r-lg, 14px);
box-shadow:0 24px 60px -12px rgba(3,12,54,.45), 0 4px 16px rgba(3,12,54,.18);
border:1px solid rgba(255,255,255,.5);
display:block;
transition:transform .4s ease;
}
.intranet-shot-back{
top:8%;
left:2%;
z-index:1;
transform:rotate(-6deg);
}
.intranet-shot-front{
bottom:4%;
right:0;
z-index:2;
max-width:80%;
transform:rotate(4deg);
}
.intranet-shots:hover .intranet-shot-back{
transform:rotate(-9deg) translate(-6px, 4px);
}
.intranet-shots:hover .intranet-shot-front{
transform:rotate(1deg) translate(6px, -4px);
}
@media (max-width:780px){
.intranet-shots{ min-height:320px; }
.intranet-shot{ max-width:94%; }
.intranet-shot-front{ max-width:84%; }
} .pillars-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch;}
@media(max-width:900px){.pillars-grid{grid-template-columns:1fr;}}
.pillar-card{
background:var(--white); border:1px solid var(--border); border-radius:20px;
padding:30px 28px 32px;
transition:box-shadow .25s ease, transform .25s ease;
}
.pillar-card:hover{box-shadow:0 18px 40px rgba(1,8,140,.14); transform:translateY(-4px);}
.pillar-head{display:flex; align-items:center; gap:16px;}
.pillar-icon{
flex-shrink:0; width:56px; height:56px; border-radius:14px;
display:flex; align-items:center; justify-content:center;
}
.pillar-icon .material-symbols-outlined{font-size:26px; color:#fff;}
.pillar-card h3{
font-size:16.5px; color:var(--text); line-height:1.35;
text-transform:uppercase; letter-spacing:.03em;
}
.pillar-divider{height:3px; width:56px; border-radius:2px; margin:20px 0 24px;}
.pillar-card:nth-child(1) .pillar-icon{background:var(--brand);}
.pillar-card:nth-child(1) .pillar-divider{background:var(--brand);}
.pillar-card:nth-child(1) .pillar-item-num{color:var(--brand);}
.pillar-card:nth-child(2) .pillar-icon{background:var(--action);}
.pillar-card:nth-child(2) .pillar-divider{background:var(--action);}
.pillar-card:nth-child(2) .pillar-item-num{color:var(--action);}
.pillar-card:nth-child(3) .pillar-icon{background:var(--accent);}
.pillar-card:nth-child(3) .pillar-divider{background:var(--accent);}
.pillar-card:nth-child(3) .pillar-item-num{color:var(--accent);}
.pillar-items{display:flex; flex-direction:column;}
.pillar-item{padding:16px 0; border-top:1px solid var(--border);}
.pillar-item:first-child{border-top:none; padding-top:0;}
.pillar-item h4{
display:flex; align-items:baseline; gap:10px;
font-size:15.5px; color:var(--text); font-weight:800; margin-bottom:7px;
}
.pillar-item-num{font-size:23px; font-weight:800; opacity:.4; line-height:1; font-variant-numeric:tabular-nums;}
.pillar-item p{font-size:13.5px; color:var(--text-secondary); line-height:1.6;} .requisitos-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.requisito-step{ position:relative; background:var(--white); border:1px solid var(--border); border-radius:16px; padding:28px 24px; }
.requisito-step:not(:last-child)::after{
content:''; position:absolute; top:34px; right:-24px; width:24px; height:2px;
background:var(--brand);
}
.requisito-step-num{
width:40px; height:40px; border-radius:50%; background:var(--brand); color:var(--white);
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; margin-bottom:18px;
}
.requisito-step h3{ font-size:16px; margin-bottom:8px; }
.requisito-step p{ font-size:13.5px; color:var(--text-secondary); line-height:1.55; }
@media(max-width:900px){
.requisitos-steps{ grid-template-columns:repeat(2,1fr); }
.requisito-step:not(:last-child)::after{ display:none; }
}
@media(max-width:560px){
.requisitos-steps{ grid-template-columns:1fr; }
} .pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; margin-top:8px;}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr; max-width:420px; margin:8px auto 0;}}
.pricing-card{
position:relative; background:var(--white); border:2px solid #BFE0FA; border-radius:24px;
padding:36px 28px 32px; display:flex; flex-direction:column;
transition:box-shadow .25s ease, transform .25s ease;
}
.pricing-card:hover{ box-shadow:0 18px 40px rgba(1,8,140,.14); transform:translateY(-4px); }
.pricing-card--featured{ border-color:var(--brand); }
.pricing-badge{
position:absolute; top:-13px; left:50%; transform:translateX(-50%);
background:var(--brand); color:#fff; font-size:11px; font-weight:700;
letter-spacing:.04em; text-transform:uppercase; padding:5px 14px; border-radius:var(--r-full);
white-space:nowrap;
}
.pricing-card-icon{
width:52px; height:52px; border-radius:50%; margin:0 auto 18px;
display:flex; align-items:center; justify-content:center;
}
.pricing-card-icon .material-symbols-outlined{font-size:24px; color:#fff;}
.pricing-card:nth-child(1) .pricing-card-icon{background:var(--lavender);}
.pricing-card:nth-child(2) .pricing-card-icon{background:var(--action);}
.pricing-card:nth-child(3) .pricing-card-icon{background:var(--brand);}
.pricing-card h3{text-align:center; font-size:19px; margin-bottom:12px;}
.pricing-card > p{color:var(--text-secondary); font-size:14px; line-height:1.6; margin-bottom:22px; min-height:66px; text-align:center;}
.pricing-divider{height:1px; background:var(--border); margin:0 0 22px;}
.pricing-features{display:flex; flex-direction:column; gap:13px;}
.pricing-feature{display:flex; align-items:center; gap:10px; font-size:14.5px;}
.pricing-feature .material-symbols-outlined{
font-size:14px; flex-shrink:0; width:20px; height:20px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.pricing-feature.is-yes{color:var(--text);}
.pricing-feature.is-yes .material-symbols-outlined{background:var(--success-bg); color:var(--success);}
.pricing-feature.is-no{color:#A9B2C3;}
.pricing-feature.is-no .material-symbols-outlined{background:var(--error-bg); color:var(--error);} .hero-blog{
--hero-photo:url(//www.asofrio.com/wp-content/themes/asofrio/assets/images/slider.png);
position:relative; overflow:hidden;
padding:clamp(56px,10vh,104px) 0 clamp(48px,8vh,76px);
}
.hero-blog::after{
content:''; position:absolute; inset:0; z-index:-1;
background:var(--bg) var(--hero-photo) center/cover no-repeat;
animation:heroPhotoZoom 22s ease-out forwards;
}
.hero-blog::before{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(238,240,251,.90) 55%, rgba(247,249,252,.96) 100%);
}
.hero-blog-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; text-align:center; }
.hero-blog-eyebrow{
display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px;
border:1px solid var(--border); border-radius:var(--r-full);
font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--brand); background:var(--white); margin-bottom:20px;
}
.hero-blog-eyebrow .material-symbols-outlined{ font-size:15px; color:var(--action); }
.hero-blog-title{ font-size:clamp(30px, 2.6vw + 1.2vh, 46px); line-height:1.12; letter-spacing:-.02em; color:var(--brand); display:block; }
.hero-blog-title em{ font-style:normal; color:var(--action); }
.hero-blog .lede{ color:#4A5B8C; font-size:clamp(15px,.4vw + .8vh,17px); max-width:560px; margin:18px auto 0; } .blog-layout{ display:grid; grid-template-columns:4fr 1fr; gap:40px; align-items:start; }
.blog-sidebar{ display:flex; flex-direction:column; gap:24px; position:sticky; top:88px; }
.sidebar-banner{
position:relative; overflow:hidden; border-radius:var(--r-lg); padding:26px 22px; color:var(--white);
background:
linear-gradient(160deg, rgba(6,27,95,.94) 0%, rgba(8,31,114,.90) 60%, rgba(6,27,95,.96) 100%),
var(--nav) url(//www.asofrio.com/wp-content/themes/asofrio/assets/images/slider.png) center/cover no-repeat;
}
.sidebar-banner h4{ color:var(--white); font-size:16px; margin-bottom:8px; }
.sidebar-banner p{ color:#DCE2F2; font-size:13px; line-height:1.55; margin-bottom:16px; }
.sidebar-block{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); padding:22px; }
.sidebar-block h4{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--text); margin-bottom:6px; }
.sidebar-categories{ display:flex; flex-direction:column; margin-top:8px; }
.sidebar-categories a{
display:flex; align-items:center; justify-content:space-between; width:100%;
background:none; border:none; padding:11px 2px; font-size:14px; font-weight:600; color:var(--text-secondary);
border-bottom:1px solid var(--border); text-align:left; text-decoration:none;
}
.sidebar-categories li:last-child a{ border-bottom:none; }
.sidebar-categories a:hover{ color:var(--action); }
.sidebar-categories a.active{ color:var(--action); }
.sidebar-categories a .material-symbols-outlined{ font-size:16px; color:var(--text-secondary); }
.sidebar-categories a:hover .material-symbols-outlined,
.sidebar-categories a.active .material-symbols-outlined{ color:var(--action); }
@media(max-width:900px){
.blog-layout{ grid-template-columns:1fr; }
.blog-sidebar{ position:static; }
} .blog-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px; }
.blog-pagination .nav-links{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.blog-pagination .page-numbers{
min-width:38px; height:38px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--border);
background:var(--white); color:var(--text-secondary); font-size:14px; font-weight:600;
display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.blog-pagination .page-numbers:hover{ border-color:var(--action); color:var(--action); }
.blog-pagination .page-numbers.current{ background:var(--action); border-color:var(--action); color:var(--white); }
.blog-pagination .page-numbers.dots{ border:none; background:none; } .newsletter-banner{
display:flex; align-items:center; gap:28px; flex-wrap:wrap;
background:var(--lavender-bg); border-radius:var(--r-lg); padding:36px 40px;
}
.newsletter-icon{
width:56px; height:56px; border-radius:50%; background:var(--white); color:var(--brand);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
box-shadow:0 4px 14px rgba(1,8,140,.10);
}
.newsletter-copy{ flex:1; min-width:220px; }
.newsletter-copy h3{ margin-bottom:6px; }
.newsletter-copy p{ font-size:14px; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input{
border:1px solid var(--border); border-radius:var(--r-sm); padding:11px 14px; font-size:14px;
font-family:inherit; min-width:240px; background:var(--white); color:var(--text);
}
.newsletter-form input:focus{ outline:2px solid var(--action); outline-offset:1px; border-color:var(--action); }
@media(max-width:720px){
.newsletter-banner{ flex-direction:column; text-align:center; padding:28px 20px; }
.newsletter-copy{ min-width:0; }
.newsletter-form{ width:100%; justify-content:center; }
.newsletter-form input{ flex:1; min-width:0; }
} .modal-instalador{ position:fixed; inset:0; z-index:1000; display:none; }
.modal-instalador.is-open{ display:block; }
.modal-instalador-backdrop{ position:absolute; inset:0; background:rgba(3,12,54,.6); }
.modal-instalador-panel{
position:relative; z-index:1; max-width:520px; width:calc(100% - 32px);
margin:60px auto; background:var(--white); border-radius:var(--r-lg,14px);
padding:28px; max-height:calc(100vh - 120px); overflow-y:auto;
}
.modal-instalador-close{
position:absolute; top:16px; right:16px; background:none; border:none; cursor:pointer;
color:var(--text-secondary);
}
.installer-result-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.installer-result-top{
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.installer-result-logo{
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:auto;
}
.installer-result-logo img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
} .finder-empty-state{
text-align:center; padding:48px 20px; color:var(--text-secondary);
}
.finder-empty-state .material-symbols-outlined{
font-size:40px; color:var(--border); margin-bottom:12px; display:block;
}
.finder-empty-state h4{ color:var(--text); margin-bottom:6px; }
.finder-empty-state p{ font-size:14px; max-width:320px; margin:0 auto 16px; }
.place .distance{
margin-left:8px; font-weight:600; color:var(--action, #2563eb);
}
.installer-map{
position:relative;
overflow:hidden;
border-radius:var(--r-lg, 14px);
}
.installer-map-canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.installer-map .map-badge{
position:relative;
z-index:2;
pointer-events:none;
} .legal-content{ line-height:1.75; color:var(--text); font-size:15px; }
.legal-content h2{ margin-top:36px; margin-bottom:12px; font-size:20px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ margin-top:24px; margin-bottom:8px; font-size:16px; }
.legal-content p{ margin-bottom:16px; }
.legal-content ul, .legal-content ol{ margin:0 0 16px 20px; }
.legal-content li{ margin-bottom:6px; }
.legal-content a{ color:var(--action); font-weight:600; }
.legal-content table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px; }
.legal-content th, .legal-content td{ border:1px solid var(--border); padding:8px 10px; text-align:left; } .solutions-services{
position:relative; background:var(--nav) url(https://www.asofrio.com/wp-content/uploads/2026/08/hero-instaladores.webp) center 30%/cover no-repeat;
color:var(--text); overflow:hidden; padding:clamp(56px,8vh,88px) 0;
}
.solutions-services::before{
content:''; position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 55%, rgba(255,255,255,.96) 100%),
radial-gradient(circle at 8% 12%, rgba(140,143,246,.20), transparent 45%),
radial-gradient(circle at 92% 88%, rgba(22,199,232,.16), transparent 45%);
}
.solutions-services > .wrap{position:relative; z-index:1;}
.solutions-services .eyebrow{color:var(--accent); justify-content:center;}
.solutions-services h2{color:var(--brand);}
.solutions-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:0;
margin-top:40px; border-top:1px solid var(--border);
}
.solution-item{
padding:36px 32px; border-right:1px solid var(--border);
display:flex; flex-direction:column;
}
.solution-item:last-child{border-right:none;}
.solution-num{ font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--accent); margin-bottom:16px; }
.solution-item h3{color:var(--brand); font-size:20px; margin-bottom:12px;}
.solution-item p{color:var(--text-secondary); line-height:1.65; font-size:14.5px; flex:1;}
.solution-cta{
display:inline-flex; align-items:center; gap:6px; margin-top:24px;
background:none; border:none; padding:0 0 3px; font-size:14px; font-weight:700;
color:var(--brand); cursor:pointer; text-decoration:none; align-self:flex-start; font-family:inherit;
border-bottom:2px solid var(--accent);
}
.solution-cta .material-symbols-outlined{font-size:18px; transition:transform .2s ease;}
.solution-cta:hover{color:var(--action);}
.solution-cta:hover .material-symbols-outlined{transform:translateX(4px);}
.solutions-bottom{
position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:56px;
align-items:center; margin:clamp(40px,6vh,64px) 0 0;
}
.solutions-testimonial-quote{ font-style:italic; font-weight:500; font-size:22px; line-height:1.5; color:var(--brand); }
.solutions-testimonial-author{margin-top:22px; display:flex; flex-direction:column; gap:3px;}
.solutions-testimonial-name{font-weight:700; color:var(--brand); font-size:15px; font-style:normal;}
.solutions-testimonial-role{color:var(--text-secondary); font-size:13.5px; font-style:normal;}
.solutions-video{position:relative;}
.solutions-video .video-card{
aspect-ratio:16/9; border-radius:var(--r-lg); box-shadow:0 20px 48px rgba(1,8,45,.20);
}
@media(max-width:860px){
.solutions-grid{grid-template-columns:1fr; border-top:none; margin-top:32px;}
.solution-item{border-right:none; border-top:1px solid var(--border); padding:28px 4px;}
.solutions-bottom{grid-template-columns:1fr; gap:32px;}
} .eventos-proximos {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 32px;
align-items: start;
margin-top: 32px;
} .eventos-calendario {
background: #fff;
border: 1px solid var(--border, #e4e7ec);
border-radius: var(--r-md, 14px);
padding: 20px;
box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
}
.eventos-calendario-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.eventos-calendario-mes {
font-weight: 700;
font-size: 15px;
text-transform: capitalize;
color: var(--text, #101828);
}
.eventos-calendario-nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: #f2f4f7;
color: var(--text, #101828);
cursor: pointer;
transition: background 0.15s ease;
}
.eventos-calendario-nav:hover {
background: #e4e7ec;
}
.eventos-calendario-dow {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 6px;
}
.eventos-calendario-dow span {
text-align: center;
font-size: 11px;
font-weight: 700;
color: var(--text-secondary, #667085);
text-transform: uppercase;
}
.eventos-calendario-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.eventos-calendario-dia {
position: relative;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 8px;
font-size: 13px;
color: var(--text, #101828);
cursor: default;
}
.eventos-calendario-dia--vacio {
visibility: hidden;
}
.eventos-calendario-dia.tiene-evento {
cursor: pointer;
font-weight: 700;
color: #fff;
background: var(--primary, #0b63ce);
}
.eventos-calendario-dia.tiene-evento:hover {
background: var(--primary-dark, #0950a6);
}
.eventos-calendario-dia:disabled {
color: var(--text-secondary, #98a2b3);
} .eventos-carrusel {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.eventos-carrusel-viewport {
position: relative;
overflow: hidden;
border-radius: var(--r-md, 14px);
height: 300px; }
.eventos-carrusel-track {
display: flex;
flex-direction: column;
gap: 20px;
transition: transform 0.5s ease;
}
.eventos-carrusel-slide {
flex: 0 0 auto;
height: 230px;
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 0;
background: #fff;
border: 1px solid var(--border, #e4e7ec);
border-radius: var(--r-md, 14px);
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
}
.eventos-carrusel-img {
background-size: cover;
background-position: center;
background-color: #eef1f5;
height: 100%;
}
.eventos-carrusel-body {
padding: 26px 28px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
overflow: hidden;
}
.eventos-carrusel-fecha {
display: inline-flex;
align-self: flex-start;
padding: 4px 10px;
border-radius: 999px;
background: var(--primary-soft, #eef6ff);
color: var(--primary, #0b63ce);
font-size: 12.5px;
font-weight: 700;
}
.eventos-carrusel-titulo {
margin: 0;
font-size: 20px;
line-height: 1.3;
color: var(--text, #101828);
}
.eventos-carrusel-extracto {
margin: 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--text-secondary, #667085);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.eventos-carrusel-cta {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
font-size: 13.5px;
font-weight: 700;
color: var(--primary, #0b63ce);
} .eventos-carrusel-fade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 90px;
background: linear-gradient(to bottom, rgba(247, 248, 251, 0) 0%, var(--bg-section, #f7f8fb) 85%);
pointer-events: none;
}
.eventos-carrusel-controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
}
.eventos-carrusel-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--border, #e4e7ec);
border-radius: 50%;
background: #fff;
color: var(--text, #101828);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.eventos-carrusel-arrow:hover {
background: #f2f4f7;
border-color: #d0d5dd;
} @media (max-width: 900px) {
.eventos-proximos {
grid-template-columns: 1fr;
}
.eventos-carrusel-slide {
grid-template-columns: 1fr;
height: auto;
}
.eventos-carrusel-img {
height: 160px;
}
.eventos-carrusel-viewport {
height: 340px;
}
} .badge-proximo-evento-row {
display: flex;
justify-content: center;
}
.badge-proximo-evento {
display: inline-flex;
align-items: center;
padding: 4px 14px;
border-radius: 999px;
background: #fbbf24;
color: #78350f;
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
} .cae-gestion-wrap{
display:flex;
flex-wrap:wrap;
gap:56px;
align-items:center;
}
.cae-gestion-texto{
flex:1 1 420px;
}
.cae-gestion-stats{
flex:1 1 320px;
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.cae-gestion-stat{
text-align:left;
padding:20px;
border:1px solid var(--border);
border-radius:var(--r-md);
box-sizing:border-box;
}
.cae-gestion-stat .num{
font-size:26px;
color:var(--brand);
font-weight:700;
line-height:1.15;
}
.cae-gestion-stat .lbl{
color:var(--text-secondary);
font-size:13px;
line-height:1.4;
margin-top:6px;
}
@media (max-width:600px){
.cae-gestion-stats{
gap:10px;
}
.cae-gestion-stat{
padding:12px;
}
.cae-gestion-stat .num{
font-size:17px;
}
.cae-gestion-stat .lbl{
font-size:11px;
margin-top:4px;
}
}.value-services{
position:relative; background:var(--nav) url(https://www.asofrio.com/wp-content/uploads/2026/08/valor-asofrio.webp) center 30%/cover no-repeat;
color:#fff; overflow:hidden; padding:clamp(56px,8vh,88px) 0;
}
.value-services::before{
content:''; position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(135deg, rgba(1,8,140,.90) 0%, rgba(6,27,95,.93) 55%, rgba(3,12,54,.95) 100%),
radial-gradient(circle at 8% 12%, rgba(140,143,246,.30), transparent 45%),
radial-gradient(circle at 92% 88%, rgba(22,199,232,.24), transparent 45%);
}
.value-services > .wrap{position:relative; z-index:1;}
.value-services .eyebrow{color:var(--accent); justify-content:center;}
.value-services h2{color:#fff;}
.value-services-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:0;
margin-top:40px; border-top:1px solid rgba(255,255,255,.16);
}
.value-service{
padding:36px 32px; border-right:1px solid rgba(255,255,255,.16);
display:flex; flex-direction:column;
}
.value-service:last-child{border-right:none;}
.value-service-num{ font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--accent); margin-bottom:16px; }
.value-service h3{color:#fff; font-size:20px; margin-bottom:12px;}
.value-service p{color:#C3CCE3; line-height:1.65; font-size:14.5px; flex:1;}
.value-service-cta{
display:inline-flex; align-items:center; gap:6px; margin-top:24px;
background:none; border:none; padding:0 0 3px; font-size:14px; font-weight:700;
color:#fff; cursor:pointer; text-decoration:none; align-self:flex-start; font-family:inherit;
border-bottom:2px solid var(--accent);
}
.value-service-cta .material-symbols-outlined{font-size:18px; transition:transform .2s ease;}
.value-service-cta:hover{color:var(--accent);}
.value-service-cta:hover .material-symbols-outlined{transform:translateX(4px);}
.value-services-bottom{
position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:56px;
align-items:center; margin:clamp(40px,6vh,64px) 0 0;
}
.value-testimonial-quote{ font-style:italic; font-weight:500; font-size:22px; line-height:1.5; color:#fff; }
.value-testimonial-author{margin-top:22px; display:flex; flex-direction:column; gap:3px;}
.value-testimonial-name{font-weight:700; color:#fff; font-size:15px; font-style:normal;}
.value-testimonial-role{color:#C3CCE3; font-size:13.5px; font-style:normal;}
.value-services-video{position:relative;}
.value-services-video .video-card{
aspect-ratio:16/9; border-radius:var(--r-lg); box-shadow:0 20px 48px rgba(1,8,45,.35);
}
@media(max-width:860px){
.value-services-grid{grid-template-columns:1fr; border-top:none; margin-top:32px;}
.value-service{border-right:none; border-top:1px solid rgba(255,255,255,.16); padding:28px 4px;}
.value-services-bottom{grid-template-columns:1fr; gap:32px;}
} .jobs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; margin-top:8px; }
.jobs-col{ display:flex; flex-direction:column; }
.jobs-viewport{ overflow:hidden; position:relative; }
.jobs-track{ will-change:transform; }
.jobs-controls{ display:flex; gap:10px; margin-top:16px; flex-shrink:0; }
.jobs-col > .btn{ margin-top:16px; align-self:flex-start; flex-shrink:0; }
.jobs-media-wrap{ position:relative; height:clamp(360px, 34vw, 460px); }
.jobs-media{ position:absolute; inset:0; border-radius:20px; overflow:hidden; box-shadow:0 1px 3px rgba(11,31,77,.06); }
.jobs-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.jobs-media-shade{
position:absolute; inset:0;
background:linear-gradient(0deg, rgba(1,8,45,.78) 0%, rgba(1,8,45,.1) 45%, rgba(1,8,45,0) 68%);
}
.jobs-media-caption{ position:absolute; left:22px; bottom:22px; color:#fff; }
.jobs-media-caption strong{ display:block; font-size:16px; font-weight:700; }
.jobs-media-caption span{ display:block; font-size:13px; color:#DCE2F2; margin-top:2px; }
@media(max-width:860px){
.jobs-grid{ grid-template-columns:1fr; }
.jobs-media-wrap{ height:280px; order:-1; margin-bottom:28px; }
} @media(max-width:980px){
.jobs-grid > *,
.jobs-col > *{
min-width:0;
}
}