/* Mutador · normas en css/LEEME.md */

@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/v2/newsreader-latin-opsz-normal.woff2') format('woff2'); }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:200 800; font-display:swap;
  src:url('../fonts/v2/newsreader-latin-opsz-italic.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/v2/inter-latin-wght-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/v2/roboto-mono-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Mono'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('../fonts/v2/roboto-mono-latin-500-normal.woff2') format('woff2'); }

:root{

  --papel:  #efece4;
  --tinta:  #1a1814;
  --gris:   #7a7568;
  --linea:  rgba(207,201,187,.44);
  --acento: #b4533a;

  --f-titular: 'Newsreader', Georgia, serif;
  --f-texto:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'Roboto Mono', ui-monospace, Menlo, monospace;

  --t-texto:    13px;
  --t-razon:    1.56;
  --t-small:    11px;
  --t-xs-small:  9px;

  --medida:   62ch;
}

:root{
  --t-h6: var(--t-texto);
  --t-h5: calc(var(--t-h6) * var(--t-razon));
  --t-h4: calc(var(--t-h5) * var(--t-razon));
  --t-h3: calc(var(--t-h4) * var(--t-razon));
  --t-h2: calc(var(--t-h3) * var(--t-razon));
  --t-h1: calc(var(--t-h2) * var(--t-razon));
  --t-subtitulo: calc(var(--t-h1) * .8);

}

body{
  margin: 0;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote{ margin: 0; }
:where(button,input,select,textarea){ font: inherit; color: inherit; }
a{ color: inherit; }
:where(strong,b){ font-weight: 600; }
:where(em,i){ font-style: italic; font-synthesis: none; }

.m-titulo{
  font-family: var(--f-titular);
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
}

.m-subtitulo{
  font-family: var(--f-titular);
  font-size: var(--t-subtitulo);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--gris);
}

.m-entradilla{
  font-family: var(--f-texto);
  font-size: var(--t-h5);
  font-weight: 400;
  line-height: 1.45;
  max-width: 44ch;
}

:where(p, li), .m-texto, .mct-pistas li span{
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  font-weight: 400;
  line-height: 1.6;
}
:where(p), .m-texto{ max-width: var(--medida); }

h1, .m-h1{
  font-family: var(--f-titular);
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
}

h2, .m-h2,
.bs-mq-item, .bs-mq-sep{
  font-family: var(--f-titular);
  font-size: var(--t-h2);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.03em;
}

h3, .m-h3{
  font-family: var(--f-titular);
  font-size: var(--t-h3);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.025em;
}

h4, .m-h4,
.mut-slide-title, .bs-client-item > span:first-child, .proyecto-titulo{
  font-family: var(--f-titular);
  font-size: var(--t-h4);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.02em;
}

h5, .m-h5, .mct-form .mut-contact .mc-field .mc-field-input{
  font-family: var(--f-texto);
  font-size: var(--t-h5);
  font-weight: 400;
  line-height: 1.45;
}

h6, .m-h6, .mct-pistas li{
  font-family: var(--f-texto);
  font-size: var(--t-h6);
  font-weight: 600;
  line-height: 1.6;
}

.m-small, .btn-filtro,
.bs-mq--sm .bs-mq-item, .bs-mq--sm .bs-mq-sep, .bs-client-item > span:last-child,
.mut-swatch strong, .mut-slide-tag, .bs-service-n, .bs-sticker-ring, .font-mono, .text-mono,
.mct-form .mc-field::before, .mct-form .mc-submit .btn{
  font-family: var(--f-mono);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

.m-xs-small,
.mut-swatch, .nav .menu-heading, .proyecto-descripcion, .proyecto-categoria{
  font-family: var(--f-mono);
  font-size: var(--t-xs-small);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--gris);
}

:is(.m-small,.m-xs-small) :where(ul,li,p,a,span){
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
:is(.m-small,.m-xs-small) :where(ul){ list-style: none; margin: 0; padding: 0; }

:is(.m-titulo,.m-subtitulo,h1,h2,h3,h4) :is(strong,b){ font-weight: 500; }

.m-tinta{ color: inherit; }

@media (max-width: 767.98px){
  :root{
    --t-texto:  13.5px;
    --t-razon:  1.35;
  }
}

:root{
  --paper:  var(--papel);
  --ink:    var(--tinta);
  --mute:   var(--gris);
  --rule:   var(--linea);
  --accent: var(--tinta);
  --gutter: 24px;
  --display: var(--f-titular);
  --body:    var(--f-texto);
  --mono:    var(--f-mono);
  --t-display: var(--f-titular);
  --t-lectura: var(--f-texto);
  --t-mono:    var(--f-mono);
}

body{ position: relative; min-height: 100vh; transition: background-color .5s ease, color .5s ease; }
body[data-theme="dark"]{ background-color: var(--tinta); color: var(--papel); --linea: #3a3630; --gris: #a8a090; }

html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }
.lenis.lenis-smooth iframe{ pointer-events: none; }

body{ cursor: default; }
a[href], button, [role="button"], summary, select, label[for],
input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"]{ cursor: pointer; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
textarea, [contenteditable="true"]{ cursor: text; }
a{ text-decoration: none; }
p a{ text-decoration: underline; }

.frame{ position: relative; z-index: 2; }

html, body{ max-width: 100vw; overflow-x: hidden; overflow-x: clip; }
html{ scrollbar-width: none; }
html::-webkit-scrollbar{ display: none; }
body > .container, body > .container-fluid{ max-width: none; padding: 0; }

:root{
  --bs-body-font-family: var(--f-texto);
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--papel);
  --bs-link-color: var(--tinta);
  --bs-link-hover-color: var(--acento);
  --bs-link-color-rgb: 26, 24, 20;
  --bs-link-hover-color-rgb: 180, 83, 58;
  --bs-primary: var(--acento);
  --bs-primary-rgb: 180, 83, 58;
  --bs-border-color: var(--linea);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-focus-ring-color: rgba(180, 83, 58, .25);
  --bs-focus-ring-width: 1px;
}

p{ color: var(--gris); }
:is(.m-titulo,.m-h1,.m-h2,.m-h3,.m-h4,.m-h5,.m-h6,.m-entradilla,.m-tinta){ color: inherit; }
em.white{ color: #fff; }
ul, ol{ margin: 0; padding: 0; }
hr{ margin: 0; opacity: 1; border: 0; border-top: 1px solid var(--linea); }

button{ background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
a:focus, button:focus{ outline: none; box-shadow: none; }
a:focus-visible, button:focus-visible{ outline: 1px solid var(--acento); outline-offset: 2px; box-shadow: none; }

.offcanvas.drawer{ background: var(--papel); color: var(--tinta); border: 0; box-shadow: 0 6px 30px rgba(0,0,0,.08); overflow: auto; }
.offcanvas.offcanvas-top.drawer{ height: auto; max-height: 88vh; }
.offcanvas-backdrop.show{ opacity: .35; }

div.mod-languages ul{ margin: 0; padding: 0 0 10px; list-style: none; }
div.mod-languages li{ margin: 0; }

.vh-50{ height: 50vh !important; }
.min-vh-50{ min-height: 50vh !important; }
@media (max-width: 768px){
  .pb-m{ padding: 5vh 0 !important; }
  .vh-50{ height: auto !important; min-height: 400px; }
  .min-vh-50{ min-height: auto !important; }
}

.nav .menu-heading{ opacity: .5; }