@layer tokens, reset, base, layout, components, responsive;
@font-face {
  font-family:Montserrat;
  src:url('../assets/fonts/montserrat-medium.ttf') format('truetype');
  font-style:normal;
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url('../assets/fonts/montserrat-black.ttf') format('truetype');
  font-style:normal;
  font-weight:900;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url('../assets/fonts/montserrat-bold-italic.ttf') format('truetype');
  font-style:italic;
  font-weight:700;
  font-display:swap
}
@layer tokens {
  :root {
    --surface:#f9f5ec;
    --ink:#222216;
    --solid-ink:#000000;
    --brand:#858666;
    --brand-deep:#4c5039;
    --muted-surface:#d2cbc1;
    --neutral-surface:#f5f5f5;
    --dark-surface:#202020;
    --line:rgba(34,34,22,.22);
    --gutter:clamp(1.25rem,5vw,5rem);
    --section-space:clamp(4rem,8vw,8rem);
    --font:Montserrat,Arial,sans-serif;
    --paper:url('../assets/papel.png');
    --texture:url('../assets/textura-oscura.png');
    --radius:2rem
  }
}
@layer reset {
  * {
    box-sizing:border-box
  }
  body,h1,h2,h3,p,ul,ol {
    margin:0
  }
  ul,ol {
    padding:0
  }
  button,input,select,textarea {
    font:inherit
  }
  img {
    display:block;
    max-width:100%;
    height:auto
  }
  button,a {
    -webkit-tap-highlight-color:transparent
  }
  [hidden] {
    display:none!important
  }
}
@layer base {
  html {
    scroll-behavior:smooth;
    scroll-padding-top:2rem
  }
  body {
    background:var(--surface);
    color:var(--ink);
    font:500 1rem/1.65 var(--font)
  }
  a {
    color:inherit;
    text-underline-offset:.3em
  }
  button,summary,a {
    touch-action:manipulation
  }
  button,summary {
    cursor:pointer
  }
  button {
    color:inherit
  }
  h1,h2,h3 {
    font-weight:900;
    line-height:1.03;
    letter-spacing:-.055em
  }
  h2 {
    font-size:clamp(2.5rem,4.8vw,4.6rem)
  }
  em {
    font-weight:700
  }
  strong {
    font-weight:900
  }
  :focus-visible {
    outline:3px solid currentColor;
    outline-offset:6px
  }
  main:focus {
    outline:none
  }
  section {
    scroll-margin-top:2rem
  }
  summary::-webkit-details-marker {
    display:none
  }
  summary {
    list-style:none
  }
  ::selection {
    background:var(--brand-deep);
    color:var(--surface)
  }
}
@layer layout {
  .desktop-navigation {
    display:flex;
    gap:clamp(1rem,2.6vw,3rem);
    align-items:center
  }
  .mobile-navigation {
    display:none
  }
  .site-footer {
    padding:3rem var(--gutter);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2rem;
    flex-wrap:wrap;
    background:var(--ink);
    color:var(--surface)
  }
}
@layer components {
  .brand {
    font-size:1.7rem;
    line-height:1;
    letter-spacing:-.07em;
    font-weight:900;
    text-decoration:none;
    display:inline-flex;
    flex-direction:column
  }
  .brand span {
    font-weight:500;
    letter-spacing:.35em;
    font-size:.55rem;
    margin-top:.6rem
  }
  .desktop-navigation a {
    font-size:.8rem;
    text-decoration:none;
    min-height:44px;
    display:flex;
    align-items:center
  }
  .desktop-navigation a:hover {
    text-decoration:underline
  }
  .header-contact {
    border-bottom:1px solid var(--ink);
    gap:2rem;
    font-weight:900
  }
  .skip-link {
    position:absolute;
    top:1rem;
    left:1rem;
    transform:translateY(-180%);
    z-index:10;
    padding:.8rem 1.25rem;
    background:var(--ink);
    color:var(--surface)
  }
  .skip-link:focus {
    transform:none
  }
  form {
    display:grid;
    gap:1rem
  }
  label {
    display:grid;
    gap:.4rem;
    font-size:.72rem
  }
  input,textarea,select {
    width:100%;
    border:0;
    border-bottom:1px solid var(--ink);
    border-radius:0;
    background:transparent;
    padding:.7rem .2rem;
    color:var(--ink);
    font-size:.85rem;
    min-height:44px
  }
  textarea {
    resize:vertical
  }
  .site-footer p,.site-footer>a:not(.brand),.site-footer small {
    font-size:.62rem
  }
  .site-footer>a:not(.brand) {
    padding-block:.8rem;
    min-height:44px
  }
}
@layer responsive {
  @media(max-width:1050px) {
    .desktop-navigation {
      gap:1.5rem
    }
    .desktop-navigation a {
      font-size:.7rem
    }
  }
  @media(max-width:760px) {
    .desktop-navigation {
      display:none
    }
    .mobile-navigation {
      display:block;
      position:relative
    }
    .mobile-navigation summary {
      font-size:.75rem;
      display:flex;
      align-items:center;
      gap:1.5rem;
      min-height:44px
    }
    .mobile-navigation summary>span {
      font-size:1.5rem
    }
    .mobile-navigation[open] summary>span {
      transform:rotate(45deg)
    }
    .mobile-navigation nav {
      position:absolute;
      top:100%;
      right:0;
      min-width:230px;
      background:var(--ink);
      color:var(--surface);
      z-index:5;
      padding:1rem;
      box-shadow:0 10px 30px #22221633
    }
    .mobile-navigation nav a {
      display:block;
      text-decoration:none;
      padding:.8rem;
      font-size:.8rem
    }
    .site-footer {
      display:grid;
      grid-template-columns:1fr 1fr
    }
    .site-footer>a:not(.brand) {
      width:fit-content
    }
    .site-footer small {
      text-align:right
    }
  }
  @media(max-width:380px) {
    h2 {
      font-size:2.2rem
    }
  }
  @media(prefers-reduced-motion:reduce) {
    html {
      scroll-behavior:auto
    }
    *,*::before,*::after {
      animation:none!important;
      transition:none!important
    }
  }
  @media print {
    .site-footer,form {
      display:none!important
    }
    body {
      background:white;
      color:black
    }
    details::details-content {
      content-visibility:visible
    }
  }
}