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

:root{
--navy:#182e42;
--hero-navy:#061930;
--blue:#2d6a8f;
--turq:#3ba7a0;
--ink:#243746;
--muted:#5b6670;
--pale:#eaf2f5;
--white:#fff;
--line:#d7e1e6}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
font-family:"Saira",Arial,sans-serif;
color:var(--ink);
line-height:1.6;
background:var(--white)}
a{
color:var(--blue);
text-decoration:none}
a:hover{
text-decoration:underline}
.container{
width:min(1120px,calc(100% - 40px));
margin:auto}
.site-header{
background:
linear-gradient(90deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.72) 100%),
url("../images/oatecon-header-technical-bg-v1.png") center/100% auto no-repeat,
var(--white);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:10}
.nav{
min-height:191px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px}
.logo{
display:inline-flex;
align-items:center;
align-self:stretch;
flex:0 0 auto;
color:var(--navy)}
.logo:hover{
text-decoration:none}
.logo-image{
display:block;
width:auto;
height:167px;
max-width:709px;
object-fit:contain}
.nav-links{
display:flex;
gap:22px;
align-items:center;
padding:13px 16px;
border:1px solid rgba(215,225,230,.72);
border-radius:999px;
background:rgba(255,255,255,.82);
box-shadow:0 10px 30px rgba(24,46,66,.08);
font-size:16px}
@supports (backdrop-filter:blur(8px)){
.nav-links{
backdrop-filter:blur(8px)}}
.nav-links a{
color:var(--navy)}
.language-switch{
display:inline-flex;
align-items:center;
gap:8px;
padding-left:14px;
border-left:1px solid var(--line);
color:var(--navy)}
.language-switch a,
.language-switch span{
display:inline-flex;
align-items:center}
.language-switch a:hover{
text-decoration:none}
.language-flag{
display:block;
width:24px;
height:auto;
border-radius:3px;
box-shadow:0 0 0 1px var(--line)}
.language-switch [aria-current="page"] .language-flag{
box-shadow:0 0 0 2px var(--turq)}
.hero{
background:var(--navy);
color:var(--white);
padding:92px 0}
.home-hero{
display:flex;
justify-content:center;
align-items:center;
background:var(--hero-navy)}
.image-hero{
display:flex;
justify-content:center;
align-items:center;
background:var(--hero-navy)}
.home-hero-image{
display:block;
width:auto;
max-width:100%;
height:auto;
max-height:calc(100vh - 72px);
object-fit:contain}
.image-hero__image{
display:block;
width:auto;
max-width:100%;
height:auto;
object-fit:contain}
.hero h1{
font-size:clamp(36px,5vw,64px);
line-height:1.08;
max-width:760px;
margin:0 0 20px}
.section h1{
font-size:clamp(34px,4vw,48px);
line-height:1.15;
color:var(--navy);
max-width:760px;
margin:0 0 14px}
.hero p{
font-size:20px;
max-width:680px;
color:#dbe7ec}
.button{
display:inline-block;
background:transparent;
border:1px solid var(--turq);
color:var(--white);
box-shadow:
0 0 40px 40px var(--turq) inset,
0 0 0 0 var(--turq);
padding:13px 20px;
border-radius:4px;
font-weight:700;
margin-top:12px;
transition:
box-shadow .15s ease-in-out,
color .15s ease-in-out}
.button:focus-visible{
outline:3px solid rgba(59,167,160,.35);
outline-offset:3px}
@media(hover:hover){
.button:hover{
color:var(--blue);
text-decoration:none;
box-shadow:
0 0 10px 0 var(--turq) inset,
0 0 10px 4px rgba(59,167,160,.55)}
}
.section{
padding:70px 0}
.section h2{
font-size:34px;
line-height:1.2;
color:var(--navy);
margin:0 0 14px}
.section-intro{
max-width:700px;
color:var(--muted)}
.section-visual{
display:block;
width:100%;
max-width:920px;
height:auto;
margin:0 auto 36px}
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:30px}
.section-summary{
grid-column:1/-1}
.section-summary h1{
font-size:clamp(34px,4vw,48px);
line-height:1.15;
color:var(--navy);
max-width:760px;
margin:0 0 14px}
.section-summary p{
max-width:680px;
color:var(--muted)}
.card{
border:1px solid var(--line);
background:#fff;
display:flex;
flex-direction:column}
.card-link{
display:flex;
flex-direction:column;
height:100%;
padding:24px;
color:var(--ink);
text-decoration:none}
.card-link:hover{
color:var(--ink);
text-decoration:none}
@media(hover:hover){
.card{
transition:
transform .25s ease,
box-shadow .25s ease}
.card:hover{
transform:scale(1.03);
box-shadow:0 12px 30px rgba(24,46,66,.12)}
}
.card h3{
color:var(--blue);
margin:0 0 8px}
.card p{
min-height:84px;
margin-bottom:0}
.card-illustration{
display:block;
width:100%;
height:150px;
object-fit:contain;
margin:18px 0}
.card-illustration--lower{
transform:translateY(30px)}
.card-cta{
margin-top:auto}
.contact-form{
border:1px solid var(--line);
padding:24px;
background:var(--white)}
.contact-form p{
margin:0 0 18px}
.contact-form label{
display:block;
font-weight:600;
color:var(--navy)}
.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
margin-top:6px;
border:1px solid var(--line);
border-radius:4px;
padding:10px 12px;
font:inherit;
color:var(--ink)}
.contact-form input[type="checkbox"]{
width:auto;
margin:0 8px 0 0}
.contact-form textarea{
resize:vertical}
.band{
background:var(--pale)}
.legal-layout{
display:grid;
grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
gap:28px;
align-items:start}
.legal-sidebar{
position:sticky;
top:230px;
display:grid;
gap:16px}
.legal-index,
.legal-note,
.legal-panel{
border:1px solid var(--line);
background:var(--white);
box-shadow:0 18px 45px rgba(24,46,66,.07)}
.legal-index,
.legal-note{
border-radius:18px;
padding:20px}
.legal-index h2{
font-size:20px;
margin-bottom:14px}
.legal-index ol{
display:grid;
gap:10px;
margin:0;
padding-left:20px}
.legal-index a{
font-weight:700}
.legal-note{
border-left:4px solid var(--turq);
color:var(--navy)}
.legal-content{
display:grid;
gap:22px}
.legal-panel{
border-radius:22px;
padding:clamp(22px,3vw,34px)}
.legal-panel[id]{
scroll-margin-top:210px}
.legal-panel h2{
font-size:30px}
.legal-panel h3{
font-size:20px;
color:var(--navy);
margin:26px 0 8px}
.legal-panel p:last-child,
.legal-panel ul:last-child{
margin-bottom:0}
.legal-summary{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:20px}
.legal-summary-item{
border-radius:16px;
background:rgba(24,46,66,.05);
padding:18px}
.legal-summary-item h3{
margin-top:0}
.legal-table{
display:grid;
margin-top:18px;
border:1px solid var(--line);
border-radius:16px;
overflow:hidden}
.legal-row{
display:grid;
grid-template-columns:minmax(210px,.38fr) minmax(0,.62fr)}
.legal-row + .legal-row{
border-top:1px solid var(--line)}
.legal-row strong,
.legal-row span{
padding:14px 16px}
.legal-row strong{
background:rgba(24,46,66,.05);
color:var(--navy)}
.legal-list{
display:grid;
gap:10px;
padding-left:20px}
.legal-highlight{
border:1px solid rgba(59,167,160,.45);
border-left:6px solid var(--turq);
border-radius:18px;
background:linear-gradient(135deg,rgba(59,167,160,.13),rgba(45,106,143,.08));
padding:22px;
margin-top:18px}
.legal-highlight h3{
margin-top:0}
.legal-highlight strong{
color:var(--navy)}
.process-intro{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(280px,.55fr);
gap:36px;
align-items:end;
margin-bottom:34px}
.process-intro h2{
max-width:780px}
.process-intro p{
max-width:720px}
.process-hint{
justify-self:end;
max-width:330px;
padding:18px 20px;
border:1px solid var(--line);
border-left:4px solid var(--turq);
border-radius:18px;
background:rgba(234,242,245,.72);
color:var(--navy);
font-weight:600}
.process-scroll-shell{
position:relative;
overflow:visible}
.process-track{
display:flex;
gap:24px;
overflow-x:auto;
overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scroll-padding-inline:0;
padding:8px 0 28px;
scrollbar-color:var(--turq) var(--pale);
scrollbar-width:thin}
.process-track.is-wheel-scrolling{
scroll-snap-type:none}
.process-card{
position:relative;
flex:0 0 min(430px,82vw);
min-height:360px;
scroll-snap-align:start;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:30px;
border:1px solid rgba(24,46,66,.12);
border-radius:28px;
background:
linear-gradient(145deg,rgba(255,255,255,.96),rgba(234,242,245,.88)),
radial-gradient(circle at top right,rgba(59,167,160,.16),transparent 36%);
box-shadow:0 22px 55px rgba(24,46,66,.12);
overflow:hidden}
.process-card::before{
content:"";
position:absolute;
top:54px;
left:74px;
right:-24px;
height:2px;
background:linear-gradient(90deg,rgba(59,167,160,.6),rgba(45,106,143,0))}
.process-card__step{
position:relative;
z-index:1;
width:88px;
height:88px;
display:grid;
place-items:center;
border:1px solid rgba(59,167,160,.45);
border-radius:50%;
background:var(--navy);
color:var(--white);
font-size:28px;
font-weight:700;
line-height:1;
box-shadow:0 12px 30px rgba(24,46,66,.18)}
.process-card h3{
margin:30px 0 14px;
color:var(--blue);
font-size:clamp(26px,3vw,34px);
line-height:1.08}
.process-card p{
color:var(--ink);
font-size:18px;
margin-bottom:18px}
.process-card__outcome{
margin-top:auto;
padding-top:18px;
border-top:1px solid rgba(24,46,66,.12);
color:var(--muted);
font-size:15px}
.process-card__outcome strong{
display:block;
color:var(--navy);
margin-bottom:4px}
.process-cta{
margin-top:34px;
padding:30px;
border-radius:24px;
background:var(--navy);
color:var(--white);
display:flex;
gap:24px;
align-items:center;
justify-content:space-between}
.process-cta p{
max-width:680px;
margin:0;
color:#dbe7ec}
.site-footer{
background:var(--navy);
color:#dbe7ec;
padding:34px 0;
font-size:14px}
.site-footer a{
color:#dbe7ec}
.footer-row{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:20px}
.footer-copy{
justify-self:start}
.footer-links{
justify-self:end}
.footer-links a + a{
margin-left:14px}
.social-links{
display:flex;
justify-content:center;
gap:10px}
.social-link{
width:34px;
height:34px;
border:1px solid rgba(219,231,236,.35);
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
color:#dbe7ec;
transition:
background .15s ease-in-out,
border-color .15s ease-in-out,
color .15s ease-in-out,
transform .15s ease-in-out}
.social-link::before{
content:"";
display:block;
width:17px;
height:17px;
background:currentColor;
mask:center/contain no-repeat;
-webkit-mask:center/contain no-repeat}
.social-link--linkedin::before{
mask-image:url("../images/icon-linkedin.svg");
-webkit-mask-image:url("../images/icon-linkedin.svg")}
.social-link--x::before{
mask-image:url("../images/icon-x.svg");
-webkit-mask-image:url("../images/icon-x.svg")}
.social-link--whatsapp::before{
mask-image:url("../images/icon-whatsapp.svg");
-webkit-mask-image:url("../images/icon-whatsapp.svg")}
.social-link--instagram::before{
mask-image:url("../images/icon-instagram.svg");
-webkit-mask-image:url("../images/icon-instagram.svg")}
.cookie-notice{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:20;
padding:16px;
background:rgba(24,46,66,.96);
box-shadow:0 -12px 30px rgba(24,46,66,.18)}
.cookie-notice__content{
width:min(1120px,calc(100% - 24px));
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
color:#dbe7ec}
.cookie-notice__content p{
margin:0;
max-width:760px;
font-size:14px}
.cookie-notice__actions{
display:flex;
align-items:center;
gap:14px;
flex:0 0 auto}
.cookie-notice__actions a{
color:#dbe7ec;
font-weight:600}
.cookie-notice__button,
.cookie-reset{
border:1px solid var(--turq);
background:transparent;
color:var(--white);
box-shadow:
0 0 40px 40px var(--turq) inset,
0 0 0 0 var(--turq);
border-radius:4px;
padding:10px 16px;
font:inherit;
font-weight:700;
cursor:pointer;
transition:
box-shadow .15s ease-in-out,
color .15s ease-in-out}
.cookie-reset{
margin-top:10px}
.cookie-notice__button:focus-visible,
.cookie-reset:focus-visible{
outline:3px solid rgba(59,167,160,.35);
outline-offset:3px}
@media(hover:hover){
.cookie-notice__button:hover,
.cookie-reset:hover{
color:var(--blue);
box-shadow:
0 0 10px 0 var(--turq) inset,
0 0 10px 4px rgba(59,167,160,.55)}
.social-link:hover{
background:var(--turq);
border-color:var(--turq);
color:var(--white);
transform:translateY(-2px);
text-decoration:none}
}
@media(max-width:760px){
.container{
width:min(100% - 28px,1120px)}
.nav{
min-height:132px}
.logo-image{
height:131px;
max-width:64vw}
.nav-links{
gap:10px;
font-size:12px}
.hero{
padding:62px 0}
.home-hero-image{
max-height:none}
.grid{
grid-template-columns:1fr}
.card p{
min-height:0}
.section{
padding:52px 0}
.hero p{
font-size:18px}
.footer-row{
grid-template-columns:1fr;
justify-items:center;
text-align:center}
.footer-copy,
.footer-links{
justify-self:center}
.legal-layout,
.legal-summary,
.legal-row{
grid-template-columns:1fr}
.legal-sidebar{
position:static}
.process-intro,
.process-cta{
grid-template-columns:1fr;
display:grid}
.process-hint{
justify-self:stretch}
.process-card{
flex-basis:86vw;
min-height:330px;
padding:24px}
.process-card h3{
margin-top:24px}
.cookie-notice__content{
align-items:flex-start;
flex-direction:column}
.cookie-notice__actions{
width:100%;
justify-content:space-between}
}