/* ===========================================================
   OSIA LEGAL — hoja de estilo compartida
   Contiene SOLO los bloques idénticos en las cinco páginas
   principales (inicio, servicios, sobre nosotros, blog,
   contacto). Todo lo específico de cada página sigue inline
   en su propio <style>, que se carga después y por tanto
   puede sobrescribir lo de aquí.
   =========================================================== */

:root{
  --paper:#FEFEFE; --ink:#141413; --red:#8E1B1C; --stone:#9A968F;
  --ease:cubic-bezier(0.32,0.72,0,1);
  --hairline:rgba(20,20,19,0.1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Instrument Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--red); color:var(--paper)}
main{overflow-x:clip; width:100%}

/* ---- grano de papel fijo ---- */
body::after{
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,.jost{font-family:'Jost',sans-serif; font-weight:300; letter-spacing:-0.015em}
.mono{font-family:'Spline Sans Mono',monospace; letter-spacing:0.08em; text-transform:uppercase}
.wrap{max-width:1440px; margin:0 auto; padding-left:clamp(1.5rem,5vw,4.5rem); padding-right:clamp(1.5rem,5vw,4.5rem)}

/* ============ NAV ============ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:1.15rem clamp(1.25rem,5vw,4.5rem);
  border-bottom:1px solid transparent;
  transition:background 0.6s var(--ease), border-color 0.6s var(--ease), backdrop-filter 0.6s var(--ease);
}
nav.scrolled{
  background:rgba(254,254,254,0.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline);
}
body.menu-open nav{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent}
nav .osia-mark{width:112px; height:auto; display:block; color:var(--ink)}
.osia-nav-logo{isolation:isolate}
.osia-logo-reveal .osia-mark path{animation-duration:2.5s; animation-timing-function:cubic-bezier(.65,0,.25,1); animation-fill-mode:both}
/* The reference animation is sequential: OSI fades in, then the red A stroke, then the black stroke. */
.osia-logo-reveal .osia-mark path:nth-child(1),
.osia-logo-reveal .osia-mark path:nth-child(2),
.osia-logo-reveal .osia-mark path:nth-child(4){animation-name:osia-letters-fade}
.osia-logo-reveal .osia-mark path:nth-child(3){animation-name:osia-draw-red; clip-path:inset(100% 0 0 0); -webkit-clip-path:inset(100% 0 0 0)}
.osia-logo-reveal .osia-mark path:nth-child(5){animation-name:osia-draw-black; clip-path:inset(0 0 100% 0); -webkit-clip-path:inset(0 0 100% 0)}
@keyframes osia-letters-fade{0%,18%{opacity:0}28%,100%{opacity:1}}
@keyframes osia-draw-red{0%,28%{clip-path:inset(100% 0 0 0);-webkit-clip-path:inset(100% 0 0 0)}58%,100%{clip-path:inset(0);-webkit-clip-path:inset(0)}}
@keyframes osia-draw-black{0%,57%{clip-path:inset(0 0 100% 0);-webkit-clip-path:inset(0 0 100% 0)}88%,100%{clip-path:inset(0);-webkit-clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){
  .osia-logo-reveal .osia-mark path{animation:none!important; opacity:1!important; clip-path:none!important; -webkit-clip-path:none!important}
}
.nav-links{display:flex; gap:2.25rem; align-items:center}
.nav-links a{
  position:relative; font-size:0.875rem; font-weight:500; letter-spacing:0.02em;
  color:var(--ink); text-decoration:none; padding:0.35rem 0;
  transition:color 0.4s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform 0.5s var(--ease);
}
.nav-links a:hover{color:var(--red)}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--red)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

/* ---- foco visible (teclado) ---- */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.nav-links a.activo{color:var(--red)}
.nav-links a.activo::after{transform:scaleX(1)}
.nav-right{display:flex; gap:1.5rem; align-items:center}
.language-switcher{display:inline-flex;align-items:center;gap:.2rem;padding:.3rem;border:1px solid var(--hairline);border-radius:999px;background:rgba(254,254,254,.55);font-family:'Spline Sans Mono',monospace;font-size:.625rem;letter-spacing:.08em}
.language-switcher button{border:0;background:transparent;color:var(--stone);font:inherit;letter-spacing:inherit;padding:.35rem .42rem;border-radius:999px;cursor:pointer;transition:background .25s ease,color .25s ease}
.language-switcher button[aria-pressed="true"],.language-switcher button:hover{background:var(--ink);color:var(--paper)}
.nav-consult{
  display:inline-flex; align-items:center; justify-content:center; gap:0.75rem;
  min-height:46px; padding:0.375rem 0.375rem 0.375rem 1.25rem;
  border:0; border-radius:999px; background:var(--red); color:var(--paper);
  font-size:0.8125rem; font-weight:500; white-space:nowrap; text-decoration:none;
  transition:background 0.2s ease, transform 0.2s ease;
}
.nav-consult:hover{background:#731719; color:var(--paper)}
.nav-consult:active{transform:translateY(1px)}
.nav-consult svg{width:34px; height:34px; padding:0.5rem; flex:none; border-radius:50%; background:rgba(254,254,254,0.16)}
.nav-consult-short{display:none}

.nav-data{display:flex; gap:2.25rem; align-items:center; font-family:'Spline Sans Mono',monospace; font-size:0.6875rem; letter-spacing:0.1em; color:var(--stone); text-transform:uppercase}
.nav-data .estado{color:var(--ink)}
.nav-data .estado i{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red); margin-right:0.5rem; font-style:normal}
.burger{
  display:none; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(20,20,19,0.2); background:transparent;
  flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer;
}
.burger i{display:block; width:19px; height:1.5px; background:var(--ink); transition:transform 0.5s var(--ease)}
body.menu-open .burger i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* ============ MENÚ MÓVIL ============ */
.menu{
  position:fixed; inset:0; z-index:110; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(1.5rem,7vw,4rem);
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path 0.8s var(--ease), visibility 0s 0.8s;
}
body.menu-open .menu{clip-path:inset(0 0 0% 0); visibility:visible; transition:clip-path 0.8s var(--ease)}
.menu a{
  display:block; font-family:'Jost',sans-serif; font-weight:300; color:var(--ink); text-decoration:none;
  font-size:clamp(2.5rem,9vw,4.5rem); line-height:1.1; letter-spacing:-0.02em;
  border-bottom:1px solid var(--hairline); padding:0.35em 0; overflow:hidden;
  transition:color 0.5s var(--ease), padding-left 0.5s var(--ease);
}
.menu a span{display:inline-block; transform:translateY(110%); transition:transform 0.7s var(--ease)}
body.menu-open .menu a span{transform:translateY(0)}
body.menu-open .menu a:nth-child(1) span{transition-delay:0.15s}
body.menu-open .menu a:nth-child(2) span{transition-delay:0.23s}
body.menu-open .menu a:nth-child(3) span{transition-delay:0.31s}
body.menu-open .menu a:nth-child(4) span{transition-delay:0.39s}
body.menu-open .menu a:nth-child(5) span{transition-delay:0.47s}
.menu a:hover{color:var(--red); padding-left:1.25rem}
.menu a.activo{color:var(--red)}
body.menu-open .menu a:nth-child(6) span{transition-delay:0.55s}
.menu a.menu-switch{color:var(--red)}
.menu a.menu-switch i{
  display:inline-block; vertical-align:middle; margin-left:1rem; transform:translateY(-0.15em);
  font-family:'Spline Sans Mono',monospace; font-style:normal; font-weight:400;
  font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--stone);
  border:1px solid var(--hairline); border-radius:999px; padding:0.4rem 0.75rem;
}
.menu .menu-foot{
  margin-top:2.5rem; font-family:'Spline Sans Mono',monospace; font-size:0.6875rem;
  letter-spacing:0.14em; color:var(--stone); text-transform:uppercase;
  display:flex; gap:2rem; flex-wrap:wrap;
}
.menu .menu-foot a{
  display:inline; font-family:inherit; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; color:inherit; border-bottom:none; padding:0; overflow:visible;
}
.menu .menu-foot a:hover{color:var(--red); padding-left:0}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex; align-items:center; gap:0.875rem;
  font-family:'Instrument Sans',sans-serif; font-size:0.9375rem; font-weight:500;
  text-decoration:none; border-radius:999px; padding:0.5rem 0.5rem 0.5rem 1.6rem;
  transition:transform 0.5s var(--ease), background 0.5s var(--ease), color 0.5s var(--ease);
  border:none; cursor:pointer; background:none; color:inherit;
}
.btn:active{transform:scale(0.98)}
.btn .ico{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:0;
  transition:transform 0.5s var(--ease), background 0.5s var(--ease), color 0.5s var(--ease);
}
.btn .ico::before{
  content:""; width:100%; height:100%; display:block; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M6 18 18 6M6 6h12v12'/%3E%3C/svg%3E") center/1.15rem 1.15rem no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M6 18 18 6M6 6h12v12'/%3E%3C/svg%3E") center/1.15rem 1.15rem no-repeat;
}
.btn:hover .ico{transform:translate(3px,-3px)}
.btn-red{background:var(--red); color:var(--paper)}
.btn-red .ico{background:rgba(254,254,254,0.16); color:var(--paper)}
.btn-ink{background:var(--ink); color:var(--paper)}
.btn-ink .ico{background:rgba(254,254,254,0.12); color:var(--paper)}

/* ============ VOLVER ARRIBA ============ */
.osia-back-top{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:4.5rem; z-index:200;
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid rgba(254,254,254,0.18); border-radius:50%;
  background:var(--ink); color:var(--paper); cursor:pointer;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(0.75rem);
  transition:opacity 0.4s var(--ease), visibility 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s ease;
}
.osia-back-top.is-visible{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
.osia-back-top:hover{background:var(--red); transform:translateY(-2px)}
.osia-back-top:active{transform:scale(0.96)}
.osia-back-top svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.5; fill:none;}
@media (max-width:767px){
  .osia-back-top{right:0.75rem; bottom:4.25rem; width:42px; height:42px}
}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--hairline); padding:3.5rem 0 2.5rem}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:2.5rem; align-items:start}
.foot-grid .osia-mark{width:110px; color:var(--ink)}
.foot-col h4{font-family:'Spline Sans Mono',monospace; font-size:0.6875rem; letter-spacing:0.14em; color:var(--stone); text-transform:uppercase; font-weight:400; margin-bottom:1.25rem}
.foot-col p, .foot-col a{font-size:0.9375rem; line-height:1.9; color:var(--ink); text-decoration:none}
.foot-col a:hover{color:var(--red)}
.foot-col .foot-contacto{margin-top:0.75rem}
.foot-base{
  display:flex; justify-content:space-between; margin-top:3.5rem; padding-top:1.5rem;
  border-top:1px solid var(--hairline);
  font-family:'Spline Sans Mono',monospace; font-size:0.6875rem; letter-spacing:0.1em;
  color:var(--stone); text-transform:uppercase; flex-wrap:wrap; gap:0.75rem;
}

/* ============ RESPONSIVE COMPARTIDO ============ */
@media (max-width:1023px){
  .nav-data .oculto-t{display:none}
  .nav-links{gap:1.1rem}
  .nav-right{gap:0.75rem}
}
@media (max-width:767px){
  .nav-links{display:none}
  .nav-data{display:none}
  .nav-consult{min-height:44px; padding-left:1rem; gap:0.5rem; font-size:0.75rem}
  .nav-consult-full{display:none}
  .nav-consult-short{display:inline}
  .nav-consult svg{width:32px; height:32px}
  .burger{display:flex}
  .language-switcher{margin-left:auto}
  .foot-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .menu a span{transform:none}
}