/* Davencrest - tokens, fonts, reset and primitives */

@font-face {
  font-family:'Russo One';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/russo-one.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Russo One Fallback';
  src:local('Arial');
  ascent-override:82%;
  descent-override:25%;
  size-adjust:114%;
}
@font-face {
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Inter Fallback';
  src:local('Arial');
  ascent-override:91%;
  descent-override:22%;
  size-adjust:107%;
}

:root {
  color-scheme:light;
  --bano-fondo:hsl(270, 9%, 97%);
  --bano-tinte:hsl(270, 9%, 93%);
  --bano-tinte-hondo:hsl(276, 8%, 90%);
  --bano-linea:hsl(276, 7%, 85%);
  --bano-gris:hsl(276, 4%, 56%);
  --bano-texto:hsl(276, 10%, 12%);
  --bano-texto-suave:hsl(276, 8%, 30%);
  --ciruela:hsl(324, 30%, 33%);
  --ciruela-honda:hsl(324, 32%, 26%);
  --ciruela-vela:hsl(324, 24%, 95%);
  --fuente-titulo:'Russo One', 'Russo One Fallback', Arial, sans-serif;
  --fuente-texto:'Inter', 'Inter Fallback', Arial, sans-serif;
  --radio-tarjeta:20px;
  --radio-boton:8px;
  --sombra-rizo:0 0 0 1px var(--bano-linea);
  --paso:clamp(3.25rem, 6vw, 6rem);
  --ancho-max:1200px;
  --ancho-texto:68ch;
}

* {
  box-sizing:border-box;
}

html {
  -webkit-text-size-adjust:100%;
  scroll-padding-top:92px;
}

body {
  margin:0;
  min-height:100vh;
  background:var(--bano-fondo);
  color:var(--bano-texto);
  font-family:var(--fuente-texto);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img {
  max-width:100%;
  height:auto;
}

a {
  color:var(--ciruela);
  text-decoration-color:hsl(324, 30%, 72%);
  text-underline-offset:3px;
}

a:hover {
  color:var(--ciruela-honda);
}

h1, h2, h3, h4 {
  font-family:var(--fuente-titulo);
  font-weight:400;
  line-height:1.08;
  color:var(--bano-texto);
  margin:0 0 0.5em;
  letter-spacing:0.01em;
}

h2 {
  text-transform:uppercase;
  font-size:clamp(1.65rem, 3.3vw, 2.5rem);
}

h3 {
  font-size:clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing:0.02em;
}

p {
  margin:0 0 1.1em;
  max-width:var(--ancho-texto);
}

strong {
  font-weight:600;
}

ul, ol {
  margin:0 0 1.1em;
  padding-left:1.25em;
}

li {
  margin:0 0 0.4em;
}

:focus-visible {
  outline:3px solid var(--ciruela);
  outline-offset:2px;
}

/* skip link */
.salto-contenido {
  position:absolute;
  left:12px;
  top:-48px;
  z-index:200;
  padding:10px 16px;
  border-radius:var(--radio-boton);
  background:var(--ciruela);
  color:hsl(0, 0%, 100%);
  text-decoration:none;
  transition:top .18s ease;
}
.salto-contenido:focus {
  top:12px;
  color:hsl(0, 0%, 100%);
}

/* eyebrow */
.rotulo-seccion {
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 1rem;
  font-family:var(--fuente-texto);
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--ciruela);
}
.rotulo-seccion::before {
  content:'';
  width:34px;
  height:2px;
  background:var(--ciruela);
  transform:skewX(-18deg);
}

/* skewed brand marker */
/* buttons */
.boton {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:var(--radio-boton);
  font-family:var(--fuente-texto);
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.boton-primario {
  background:var(--ciruela);
  color:hsl(0, 0%, 100%);
}
.boton-primario:hover {
  background:var(--ciruela-honda);
  color:hsl(0, 0%, 100%);
}
.boton-fantasma {
  background:transparent;
  border-color:var(--bano-gris);
  color:var(--bano-texto);
}
.boton-fantasma:hover {
  border-color:var(--ciruela);
  color:var(--ciruela);
}
.boton[disabled] {
  opacity:0.55;
  cursor:not-allowed;
}
.boton-ancho {
  width:100%;
}

/* chips / facts */
.ficha-dato {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 15px;
  border:1px solid var(--bano-linea);
  border-radius:999px;
  background:var(--bano-fondo);
  font-size:0.86rem;
  font-weight:500;
  color:var(--bano-texto-suave);
}

/* fabric swatch (producto sin foto aislable) */
.muestra-tejido {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:7 / 5;
  border:1px solid var(--bano-linea);
  overflow:hidden;
}
.muestra-rizo {
  background-image:repeating-linear-gradient(90deg, hsla(0, 0%, 0%, 0.05) 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, hsla(0, 0%, 100%, 0.06) 0 3px, transparent 3px 7px);
}
.muestra-gofre {
  background-image:repeating-linear-gradient(0deg, hsla(0, 0%, 0%, 0.07) 0 5px, transparent 5px 11px), repeating-linear-gradient(90deg, hsla(0, 0%, 0%, 0.07) 0 5px, transparent 5px 11px);
}
.muestra-lino {
  background-image:repeating-linear-gradient(90deg, hsla(0, 0%, 0%, 0.045) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, hsla(0, 0%, 0%, 0.045) 0 1px, transparent 1px 4px);
}
.muestra-trenza {
  background-image:repeating-linear-gradient(45deg, hsla(0, 0%, 0%, 0.09) 0 6px, transparent 6px 13px);
}
.muestra-rayas {
  background-image:repeating-linear-gradient(0deg, hsl(222, 48%, 36%) 0 12px, hsl(0, 0%, 96%) 12px 30px);
}
.muestra-etiqueta {
  position:absolute;
  left:12px;
  bottom:12px;
  padding:5px 12px;
  background:hsla(276, 10%, 12%, 0.72);
  color:hsl(0, 0%, 100%);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.03em;
}

/* visually hidden (accesible) */