/* Generado por web-mock/tools/build.py desde tokens.json: no editar a mano. */
:root{
  --fondo:#F7F5F0;
  --tinta:#17131A;
  --tinta-suave:#6E676B;
  --filete:#DDD7D3;
  --uva:#63204F;
  --sobre-uva:#F7F5F0;
  --raspon:#5A8F2A;
  --envero-1:#8DAA45;
  --envero-2:#B9B04E;
  --envero-3:#C96C84;
  --envero-4:#8E2F5F;
  --envero-5:#63204F;
  --envero-6:#3B1537;
  --f-sans:"Figtree", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --f-mono:var(--f-sans);
  --t-nombre:600 30px/1 var(--f-sans);
  --ls-nombre:-0.025em;
  --t-titular-1:800 clamp(34px,6vw,54px)/1.02 var(--f-sans);
  --ls-titular-1:-0.025em;
  --t-titular-2:700 26px/1.15 var(--f-sans);
  --ls-titular-2:-0.01em;
  --t-titular-3:700 18px/1.25 var(--f-sans);
  --t-entradilla:400 19px/1.5 var(--f-sans);
  --t-cuerpo:400 16px/1.6 var(--f-sans);
  --t-nota:400 13px/1.45 var(--f-sans);
  --t-etiqueta:500 12px/1.2 var(--f-mono);
  --ls-etiqueta:0.08em;
  --t-dato:400 14px/1.4 var(--f-mono);
  --espacio-xs:8px;
  --espacio-s:12px;
  --espacio-m:20px;
  --espacio-l:24px;
  --espacio-xl:56px;
  --radio-s:6px;
  --radio-m:10px;
  --radio-l:12px;
  --radio-pastilla:999px;
}
/* Cabecera, franja de contacto y pie: lo mismo en todas las páginas de la web, la Wiki y el Calendario incluidos.
   Las variables de arriba las escribe tools/build.py desde marca/n3b/hoja-de-marca/tokens.json (tema claro).
   Todo va con clases «sitio-» para no chocar con las hojas propias de la Wiki y del Calendario. */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --sitio-ancho:72rem;
  color-scheme:light;
}
html{-webkit-text-size-adjust:100%;background:var(--fondo)}
::selection{background:color-mix(in srgb,var(--uva) 20%,var(--fondo));color:var(--tinta)}

.sitio-saltar{position:absolute;z-index:100;left:12px;top:-80px;background:var(--uva);color:var(--sobre-uva);font:600 15px/1 var(--f-sans);padding:12px 16px;border-radius:var(--radio-s);text-decoration:none}
.sitio-saltar:focus{top:10px}
:is(.sitio-cab,.sitio-franja,.sitio-pie) a:focus-visible{outline:2px solid var(--uva);outline-offset:3px;border-radius:4px}

/* Cabecera */
.sitio-cab{position:relative;z-index:20;background:var(--fondo);border-bottom:1px solid var(--filete);font-family:var(--f-sans)}
.sitio-cab-in{max-width:var(--sitio-ancho);margin:0 auto;padding:16px var(--espacio-m);display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.sitio-logo{display:block;flex:none;line-height:0}
.sitio-logo img{display:block;width:auto;height:32px}
.sitio-menu{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;margin-left:auto;font:600 15px/1 var(--f-sans);letter-spacing:0}
.sitio-menu a{color:var(--tinta);text-decoration:none;padding:10px 0 8px;border-bottom:2px solid transparent;transition:border-color 160ms var(--ease-out)}
.sitio-menu a:hover{border-bottom-color:var(--filete)}
.sitio-menu a[aria-current]{border-bottom-color:var(--uva)}
.sitio-menu .sitio-contacto{padding:9px 16px;border:1px solid var(--tinta);border-radius:var(--radio-pastilla);transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out)}
.sitio-menu .sitio-contacto:hover,.sitio-menu .sitio-contacto[aria-current]{background:var(--tinta);color:var(--fondo)}
@media (max-width:620px){
  .sitio-cab-in{padding:12px 16px 8px;gap:6px}
  .sitio-menu{margin-left:0;width:100%;justify-content:space-between;gap:4px 12px}
}

/* Franja de contacto: la foto B (la viña), que se funde con el fondo detrás del texto */
.sitio-franja{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(56px,8vw,104px);padding:clamp(72px,10vw,120px) var(--espacio-m);font-family:var(--f-sans);color:var(--tinta);text-align:center}
.sitio-franja-foto{
  --vertical:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent);
  --hueco:radial-gradient(ellipse 38% 52% at 50% 50%,transparent 40%,#000 100%);
  position:absolute;z-index:-1;inset:0;background:url("franja.webp") center 62%/cover no-repeat;opacity:.5;filter:saturate(.82);
  -webkit-mask-image:var(--vertical),var(--hueco);-webkit-mask-composite:source-in;mask-image:var(--vertical),var(--hueco);mask-composite:intersect;
}
.sitio-franja-in{max-width:34rem;margin:0 auto;display:grid;justify-items:center;gap:16px}
.sitio-franja h2{margin:0;font:700 clamp(24px,3.2vw,32px)/1.15 var(--f-sans);letter-spacing:-.015em;text-wrap:balance}
.sitio-franja p{margin:0;font:400 17px/1.5 var(--f-sans);color:var(--tinta)}
/* El correo, en el morado de la marca y en Figtree, subrayado como los demás enlaces de correo de la web (Iñaki, 19-10) */
.sitio-mail{display:inline-flex;align-items:center;min-height:44px;font:600 clamp(18px,2vw,21px)/1.2 var(--f-sans);letter-spacing:-.005em;color:var(--uva);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:color 160ms var(--ease-out)}
.sitio-mail:hover{color:var(--envero-6)}
.sitio-franja.solo-foto{padding:0;height:clamp(150px,24vw,240px)}
.sitio-franja.solo-foto .sitio-franja-foto{-webkit-mask-image:var(--vertical);mask-image:var(--vertical)}
@media (max-width:620px){
  .sitio-franja-foto{--hueco:radial-gradient(ellipse 70% 42% at 50% 50%,transparent 40%,#000 100%)}
}

/* Pie */
.sitio-pie{border-top:1px solid var(--filete);font:400 14.5px/1.5 var(--f-sans);color:var(--tinta-suave)}
.sitio-pie-in{max-width:var(--sitio-ancho);margin:0 auto;padding:32px var(--espacio-m) 40px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px}
.sitio-pie-logo{line-height:0;margin-right:auto}
.sitio-pie-logo img{display:block;width:auto;height:32px}
.sitio-pie-nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.sitio-pie a{color:var(--tinta-suave);text-decoration:none}
.sitio-pie a:hover{color:var(--uva);text-decoration:underline;text-underline-offset:3px}
.sitio-pie-mail{margin:0;font:400 14px/1.5 var(--f-mono)}
@media (max-width:620px){
  .sitio-pie-in{flex-direction:column;align-items:flex-start;gap:16px}
}

@media (prefers-reduced-motion:reduce){
  .sitio-menu a,.sitio-mail{transition:none}
}
@media print{
  .sitio-franja,.sitio-saltar{display:none}
}