@font-face{font-family:YoungSerif;src:url(/assets/web/fonts/youngserif-1.woff2) format("woff2")}
@font-face{font-family:SofiaSans;src:url(/assets/web/fonts/sofiasans-2.woff2) format("woff2");font-weight:1 1000}
@font-face{font-family:SofiaSans;src:url(/assets/web/fonts/sofiasans-1.woff2) format("woff2");font-weight:1 1000;font-style:italic}
@font-face{font-family:Reenie;src:url(/assets/web/fonts/reenie-1.woff2) format("woff2")}
:root{--hoja:#EDEDE8;--grafito:#232427;--lapiz:#7D8187;--cinta:#F2C230;--ease:cubic-bezier(.21,.47,.32,.98)}
*{box-sizing:border-box;margin:0}
html{background:var(--hoja)}
body{background:var(--hoja);color:var(--grafito);font-family:SofiaSans,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
.riel{position:fixed;inset:0 auto 0 0;width:210px;z-index:30;display:flex;flex-direction:column;justify-content:space-between;padding:30px 0 30px 24px;background-color:#E2E1D9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .14 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");box-shadow:inset -14px 0 18px -14px rgba(35,36,39,.28),1px 0 0 rgba(35,36,39,.25)}
.riel::after{content:"";position:absolute;right:-13px;top:18px;bottom:18px;width:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='34'%3E%3Ccircle cx='17' cy='17' r='3.2' fill='%23232427' opacity='.75'/%3E%3Cpath d='M17 17 C 4 17 2 9 9 7 C 15 5 22 9 24 14' fill='none' stroke='%236E7177' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y;pointer-events:none}
.marca{display:flex;align-items:center;gap:10px;font-family:YoungSerif;font-size:20px;padding-right:24px}
.marca svg{width:30px;height:30px;flex:none}
.riel nav{display:flex;flex-direction:column;gap:10px;margin-right:30px;position:relative;z-index:2}
.riel nav a{position:relative;display:block;font-weight:650;font-size:16px;padding:11px 18px 11px 16px;background:#F7F6F1;border:1.5px solid var(--grafito);border-left:0;box-shadow:0 1px 1px rgba(35,36,39,.12),3px 4px 8px rgba(35,36,39,.12);transition:transform .35s var(--ease),background .3s}
.riel nav a::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:4px;background:var(--grafito);opacity:.18}
.riel nav a:hover{transform:translateX(5px)}
.riel nav a.on{background:var(--cinta);transform:translateX(8px)}
.riel nav a.on::before{opacity:.5}
.riel .contacto{padding-right:30px;font-family:Reenie;font-size:25px;line-height:1}
.riel .contacto a{display:inline-block;margin-top:10px;font-family:SofiaSans;font-weight:750;font-size:15px;padding:9px 16px 8px;background-image:repeating-linear-gradient(90deg,var(--grafito) 0 1px,transparent 1px 7px);background-size:100% 5px;background-repeat:repeat-x;background-color:var(--cinta);border:1.5px solid var(--grafito);clip-path:polygon(0 0,100% 0,96% 25%,100% 50%,96% 75%,100% 100%,0 100%)}
.menu-m{display:none}
main{margin-left:210px}
@media (max-width:900px){
  .riel{position:sticky;top:0;inset:auto;width:auto;flex-direction:row;align-items:center;padding:16px}
  .riel::after{left:16px;right:16px;top:auto;bottom:0;width:auto;height:1px}
  .marca{flex-direction:row;align-items:center;font-size:19px}
  .marca svg{width:28px;height:28px}
  .riel nav,.riel .contacto{display:none}
  .menu-m{display:block;font:750 16px SofiaSans;background:none;border:0;border-bottom:1.5px solid var(--grafito);color:var(--grafito);padding:0 0 2px;cursor:pointer}
  .riel.abierto nav{display:flex;position:absolute;top:100%;left:0;right:0;margin:0;padding:14px 16px 20px;background:#E2E1D9;box-shadow:0 14px 22px rgba(35,36,39,.16)}
  .riel.abierto nav a{border-left:1.5px solid var(--grafito)}
  main{margin-left:0}
}