@font-face {

  font-family: 'Inter';

  font-style: normal;

  font-weight: 300;

  font-display: swap;

  src: url('../assets/fonts/Inter-300.woff2') format('woff2');

}



@font-face {

  font-family: 'Inter';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url('../assets/fonts/Inter-400.woff2') format('woff2');

}



@font-face {

  font-family: 'Inter';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url('../assets/fonts/Inter-500.woff2') format('woff2');

}



@font-face {

  font-family: 'Playfair Display';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url('../assets/fonts/PlayfairDisplay-400.woff2') format('woff2');

}



@font-face {

  font-family: 'Playfair Display';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url('../assets/fonts/PlayfairDisplay-400.woff2') format('woff2');

}



@font-face {

  font-family: 'Playfair Display';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url('../assets/fonts/PlayfairDisplay-400.woff2') format('woff2');

}



:root{

  --blue-900:#1F2F46;

  --blue-850:#243B55;

  --blue-800:#2B3F5C;

  --blue-700:#334763;

  --bg:#ECEFF1;

  --ink:#1F2F46;

  --muted:#8A9199;

  --muted-strong:#9AA1A8;

  --line:#d7dce2;

  --soft:#F2F4F6;

  --surface:#ffffff;

  --radius:14px;

  --max: 1080px;

}



*{box-sizing:border-box}



body{

  margin:0;

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  color:var(--ink);

  background:var(--bg);

  line-height:1.55;

}



a{color:inherit; text-decoration:none}



.container{max-width:var(--max); margin:0 auto; padding:0 22px}



header{

  border-bottom:1px solid rgba(255,255,255,.08);

  padding:22px 0;

  position:sticky;

  top:0;

  z-index:50;

  background:linear-gradient(110deg, var(--blue-900) 0%, var(--blue-850) 65%, var(--blue-800) 100%);

  color:var(--soft);

}



.header-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:24px;

}



.nav{

  display:flex;

  gap:28px;

  font-size:12px;

  letter-spacing:.14em;

  text-transform:uppercase;

}



.nav a{color:rgba(242,244,246,.75)}

.nav a:hover{color:#F2F4F6}



.lang-switch{

  display:flex;

  align-items:center;

  gap:6px;

}



.lang-switch button{

  width:34px;

  height:34px;

  border-radius:999px;

  border:1px solid rgba(242,244,246,.35);

  background:rgba(26,39,61,.5);

  color:var(--soft);

  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  font-size:14px;

  font-weight:600;

  letter-spacing:0.04em;

  text-transform:uppercase;

  line-height:1;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  transition:background .2s ease, border-color .2s ease, transform .2s ease;

}



.lang-switch button:hover{border-color:#F2F4F6; transform:translateY(-1px)}

.lang-switch button.is-active{background:var(--soft); color:var(--blue-900); border-color:transparent}

.lang-switch--desktop{margin-left:16px}

.lang-switch--desktop button[data-lang="gl"]{

  padding-top:16px;

  font-size:11px;

}



.menu-toggle{

  display:none;

  flex-direction:column;

  gap:5px;

  width:44px;

  height:44px;

  border-radius:999px;

  border:1px solid rgba(242,244,246,.35);

  background:rgba(23,34,52,.7);

  justify-content:center;

  align-items:center;

  cursor:pointer;

  padding:0;

}



.menu-toggle span{

  width:18px;

  height:2px;

  background:var(--soft);

  display:block;

  transition:transform .3s ease, opacity .3s ease;

}



.mobile-nav{

  position:fixed;

  inset:0;

  background:rgba(12,18,28,.6);

  backdrop-filter:blur(14px);

  -webkit-backdrop-filter:blur(14px);

  opacity:0;

  pointer-events:none;

  transition:opacity .35s ease;

  z-index:80;

}



.mobile-nav__panel{

  position:absolute;

  top:0;

  right:0;

  width:320px;

  max-width:85%;

  height:100%;

  background:linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 100%);

  border-left:1px solid rgba(255,255,255,.08);

  padding:32px 28px;

  display:flex;

  flex-direction:column;

  gap:28px;

  transform:translateX(100%);

  transition:transform .35s ease;

}



.mobile-nav__links{display:flex; flex-direction:column; gap:18px; font-size:15px; text-transform:uppercase; letter-spacing:.18em}

.mobile-nav__links a{color:var(--soft)}

.mobile-nav__links a:hover{color:#ffffff}

.mobile-nav .lang-switch button[data-lang="gl"]{font-size:11px}



.mobile-nav__header{display:flex; align-items:center; justify-content:space-between; gap:12px}

.brand--small{font-size:16px}

.brand--small img{height:24px}



.menu-close{

  width:42px;

  height:42px;

  border-radius:999px;

  border:1px solid rgba(242,244,246,.35);

  background:transparent;

  position:relative;

  cursor:pointer;

}



.menu-close span{

  position:absolute;

  left:12px;

  right:12px;

  height:2px;

  background:var(--soft);

}



.menu-close span:first-child{transform:rotate(45deg)}

.menu-close span:last-child{transform:rotate(-45deg)}



.mobile-nav.is-active{opacity:1; pointer-events:auto}

.mobile-nav.is-active .mobile-nav__panel{transform:translateX(0)}



body.nav-open{overflow:hidden}



.brand{

  font-family:"Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", serif;

  font-weight:700;

  display:flex;

  flex-direction:column;

  gap:2px;

  color:var(--soft);

}



.brand__primary,

.brand__secondary{display:block; line-height:1.1}

.brand__primary{font-size:18px}

.brand__secondary{font-size:14px; letter-spacing:.08em; text-transform:uppercase}



.brand--small .brand__primary{font-size:16px}

.brand--small .brand__secondary{font-size:12px; letter-spacing:.12em}



main{padding:0 0 60px}



.hero-banner__text,

main > *,

footer{

  transition:opacity 1s ease;

}



body.await-fonts .hero-banner__text,

body.await-fonts main > *,

body.await-fonts footer{

  opacity:0;

}



body[data-page="contact"] main > *,

body[data-page="contact"] footer{

  transition:none;

}



body[data-page="contact"].await-fonts main > *,

body[data-page="contact"].await-fonts footer{

  opacity:1;

}



.fade-step{

  opacity:0;

  transform:translateY(24px);

}



body.anim-ready .fade-step{

  animation:fadeStep 1s forwards;

  animation-delay:var(--fade-delay, 0s);

}



@keyframes fadeStep{

  to{

    opacity:1;

    transform:translateY(0);

  }

}



body[data-page="services"] main > .container:first-of-type,

body[data-page="professionals"] main > .container:first-of-type,

body[data-page="contact"] main > .container:first-of-type,

body[data-page="blog_index"] main > .container:first-of-type{

  margin-top:50px;

}



h1{font-size:44px; font-weight:700; margin:0 0 18px; line-height:1.08; font-family:"Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", serif}

h2{font-size:22px; margin:0 0 12px; font-family:"Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", serif}

h3{font-size:16px; margin:0 0 8px; font-family:"Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", serif}



p{margin:0 0 14px}

.muted{color:var(--muted)}



.hero{max-width:820px}

.hero p{font-size:17px}



.hero-banner{

  position:relative;

  background-image:url('../assets/fondo-hero.webp');

  background-size:cover;

  background-position:center;

  min-height:360px;

  display:flex;

  align-items:center;

  isolation:isolate;

}



.hero-banner::after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(120deg, rgba(31,47,70,.9) 0%, rgba(36,59,85,.6) 60%, rgba(43,63,92,.4) 100%);

  backdrop-filter:blur(2px);

  z-index:0;

}



.hero-banner__content{

  position:relative;

  z-index:1;

  width:100%;

  max-width:var(--max);

  margin:0 auto;

  padding:64px 22px;

}

.hero-banner__text{max-width:720px; color:var(--soft);}

.hero-banner__text h1{margin-bottom:18px; color:var(--soft);}

.hero-banner__text p{font-size:18px; color:rgba(242,244,246,.9);}



.divider{height:1px; background:var(--line); margin:32px 0}



.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:40px}



.service{padding-right:40px}



.image{

  width:100%;

  height:280px;

  border-radius:var(--radius);

  background-size:cover;

  background-position:center;

  position:relative;

  overflow:hidden;

}



.image--tall{height:320px}



img{

  filter:grayscale(100%);

  transition:filter .3s ease;

}



.card{

  padding:24px;

  border:1px solid var(--line);

  border-radius:var(--radius);

  background:var(--soft);

}



.details{display:grid; grid-template-columns:1fr 1fr; gap:18px}

.detail{padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}

.detail .k{font-size:12px; color:var(--muted); text-transform:none}

.detail .v{margin-top:6px}



.contact{

  max-width:520px;

  padding:24px;

  border:1px solid var(--line);

  border-radius:var(--radius);

  background:var(--soft);

}



label{font-size:12px; color:var(--muted)}

input, textarea, select{

  width:100%;

  padding:10px;

  margin-top:4px;

  margin-bottom:12px;

  border:1px solid var(--line);

  border-radius:8px;

  font-family:inherit;

}



button{

  padding:12px 18px;

  border:1px solid var(--blue-900);

  background:var(--blue-900);

  color:var(--soft);

  font-family:inherit;

  border-radius:999px;

  cursor:pointer;

}



.map{margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--soft)}

.map iframe{width:100%; height:260px; border:0; display:block; filter:grayscale(100%)}

.map--tall iframe{height:300px}



.posts{display:grid; grid-template-columns:1fr 1fr; gap:18px}

.post{

  border:1px solid var(--line);

  border-radius:var(--radius);

  background:var(--soft);

  padding:20px;

  display:flex;

  flex-direction:column;

  gap:10px;

  min-height:170px;

}

.post a{display:block}

.post-title{font-size:18px; font-weight:700; line-height:1.25; margin:0}

.post-meta{font-size:13px; color:var(--muted)}

.post-cta{margin-top:auto; font-size:13px; color:var(--muted)}

.post:hover .post-cta{color:var(--blue-850)}



footer{

  border-top:1px solid rgba(255,255,255,.08);

  padding:28px 0;

  font-size:13px;

  color:rgba(242,244,246,.8);

  background:linear-gradient(110deg, var(--blue-900) 0%, var(--blue-800) 100%);

}



.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:18px}

.footer-left{display:flex; flex-direction:column; gap:8px}

.footer-links{display:flex; gap:14px; flex-wrap:wrap}

.footer-links a{color:rgba(242,244,246,.8)}

.footer-links a:hover{color:#F2F4F6}



.footer-manage-cookies{

  color:#C9D6FF;

  font-size:13px;

  text-decoration:underline;

  cursor:pointer;

}



.cookie-banner{

  position:fixed;

  inset:auto 0 0 0;

  width:100%;

  background:rgba(15,23,42,.96);

  color:#F8FAFC;

  padding:18px 20px;

  z-index:120;

  border-top:1px solid rgba(255,255,255,.08);

  box-shadow:0 -10px 30px rgba(0,0,0,.35);

  display:none;

}



.cookie-banner.is-visible{display:block; animation:slideUp .35s ease}



.cookie-banner__content{

  max-width:var(--max);

  margin:0 auto;

  display:flex;

  gap:20px;

  align-items:center;

  justify-content:space-between;

}



.cookie-banner__text{

  font-size:14px;

  line-height:1.5;

}



.cookie-banner__text a{color:#F8FAFC; text-decoration:underline}



.cookie-banner__actions{display:flex; gap:10px; flex-wrap:wrap}



.cookie-banner__actions button{

  border:none;

  border-radius:999px;

  padding:10px 18px;

  font-weight:600;

  letter-spacing:.03em;

}



.cookie-banner__actions button.reject{

  background:transparent;

  color:#F8FAFC;

  border:1px solid rgba(248,250,252,.4);

}



.cookie-banner__actions button.accept{

  background:var(--blue-850);

  color:#F8FAFC;

  border:1px solid transparent;

  box-shadow:0 6px 18px rgba(0,0,0,.25);

}



.cookie-banner__actions button:focus-visible{

  outline:2px solid #fff;

  outline-offset:2px;

}



.cookie-table{

  width:100%;

  border-collapse:collapse;

  margin:18px 0;

  font-size:14px;

  background:var(--surface);

  border:1px solid var(--line);

  border-radius:12px;

  overflow:hidden;

}



.cookie-table caption{

  text-align:left;

  font-weight:600;

  margin-bottom:10px;

}



.cookie-table th,

.cookie-table td{

  padding:12px 14px;

  border-bottom:1px solid var(--line);

  vertical-align:top;

}



.cookie-table th{

  background:var(--soft);

  font-size:13px;

  letter-spacing:.04em;

  text-transform:uppercase;

}



.cookie-table tbody tr:last-child td{border-bottom:none}



.cookie-reset{

  margin:14px 0;

  padding:10px 18px;

  border-radius:999px;

  border:1px solid var(--blue-850);

  background:transparent;

  color:var(--blue-850);

  font-weight:600;

  letter-spacing:.03em;

  cursor:pointer;

}



.cookie-reset:hover{background:rgba(36,59,85,.1)}



@keyframes slideUp{

  from{transform:translateY(100%); opacity:0}

  to{transform:translateY(0); opacity:1}

}



.socials{display:flex; align-items:center; gap:12px}

.social{color:rgba(242,244,246,.75)}

.social:hover{color:#F2F4F6}

.social svg{width:18px; height:18px; display:block}



@media (max-width:900px){

  .grid-2{grid-template-columns:1fr}

  .posts{grid-template-columns:1fr}

  h1{font-size:36px}

  .service{padding-right:0}

  .footer-inner{flex-direction:column; align-items:flex-start}

  .cookie-banner__content{flex-direction:column; align-items:flex-start}

  .cookie-banner__actions{width:100%; justify-content:flex-start}

  .details{grid-template-columns:1fr}

  .hero-banner{min-height:260px}

  .hero-banner__content{padding:48px 18px}

  .nav--desktop{display:none}

  .menu-toggle{display:flex}

  .lang-switch{margin-left:0}

  .lang-switch--desktop{display:none}

}



@media (max-width:600px){

  .hero-banner__content{padding:36px 12px}

}