@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(pie/work-sans-latin-wght-normal.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: "Work Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(pie/work-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root {
  --tinta: #151515;
  --gris: #59636a;
  --pared: #f2f4f3;
  --blanco: #ffffff;
  --rojo: #d4001a;
  --hueco: clamp(1rem, 3vw, 2.5rem);
  --ancho: 84.5rem;
  --letra: "Work Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pared);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--blanco);
  padding: .5rem 1rem;
}
.saltar:focus { top: .5rem; }
.limite { max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }

/* Cabecera con el aspecto de conforama.pt: mismas medidas, sin buscador ni acceso de cliente. */
.cabecera { position: relative; z-index: 2; background: var(--blanco); color: var(--tinta); }
.cabecera-sup, .cabecera-nav { border-bottom: 1px solid #ebebeb; }
.cabecera-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: 1.25rem;
}
.marca { display: block; flex: none; }
.marca img { display: block; width: 10.9375rem; height: auto; }

.cabecera-categorias { display: flex; align-items: center; gap: 1rem 2.5rem; padding-block: 1rem; }
.menu { position: relative; flex: none; }
.menu summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.25rem;
  line-height: 1.25rem;
  cursor: pointer;
  list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 1.25rem; height: 1.25rem; flex: none; }
.menu summary:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.menu ul {
  position: absolute;
  top: calc(100% + .75rem);
  left: 0;
  display: grid;
  gap: 1rem;
  width: max-content;
  min-width: 14rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  list-style: none;
  background: var(--blanco);
  border: 1px solid #ebebeb;
  border-radius: .5rem;
  box-shadow: 0 .75rem 1.5rem rgba(21, 21, 21, .12);
}
.menu a { display: block; line-height: 1.25rem; text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.destacadas { display: flex; gap: 1.5rem; min-width: 0; margin: 0; padding: .25rem; list-style: none; overflow-x: auto; }
.destacadas a {
  display: block;
  padding: .5rem 1rem;
  background: #f7f7f7;
  border-radius: .5rem;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
.destacadas a:hover { background: #ebebeb; }

.titulo { padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 3rem); }
.titulo h1 {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
.titulo p { margin: .9rem 0 0; color: var(--gris); font-size: clamp(1.0625rem, 2vw, 1.3125rem); }

.estante {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) var(--hueco);
  margin: 0 0 clamp(3rem, 7vw, 5.5rem);
  padding: 0;
  list-style: none;
}
.guia { text-align: center; }
.portada {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 19.5rem;
  margin-inline: auto;
  aspect-ratio: 5 / 7;
  transition: transform .18s ease-out;
}
.portada img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 .75rem 1rem -.5rem rgba(30, 35, 38, .45);
}
.guia-nombre { margin: 1rem 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.guia-abrir { margin: .35rem 0 .45rem; color: var(--gris); font-size: .9375rem; }
.zonas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.zonas a {
  display: inline-block;
  min-height: 2.75rem;
  padding: .55rem .95rem;
  border: 2px solid var(--rojo);
  border-radius: .25rem;
  color: var(--rojo);
  font-weight: 600;
  text-decoration: none;
}
.zonas a:hover { background: var(--rojo); color: var(--blanco); }
a.portada:hover { transform: translateY(-.4rem); }
.portada-vacia { display: block; width: 100%; height: 100%; background: #d9dedc; }
.sin-catalogos { margin: 0 0 clamp(3rem, 7vw, 5.5rem); font-size: 1.125rem; }

/* Pie con el aspecto de conforama.pt. */
.pie { background: #f7f7f7; color: #151515; padding-block: 2.5rem; line-height: 1.25; }
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie a { color: inherit; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-titulo { margin: 0 0 1.5rem; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.pie-nav { display: flex; flex-wrap: wrap; gap: 2rem 4rem; padding-bottom: 2.5rem; }
.pie-nav li + li { margin-top: 1rem; }
.pie-tarjetas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
  padding-block: 2rem;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.pie-pago { display: flex; align-items: center; gap: .5rem; }
.pie-escudo { width: 1.25rem; height: 1.25rem; flex: none; }
.pie-pagos { display: flex; flex-wrap: wrap; gap: 1rem; max-width: 19.5rem; }
.pie-pagos li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.625rem;
  height: 2.625rem;
  padding: .375rem;
  background: #fff;
  border-radius: .25rem;
}
.pie-pagos img { display: block; max-width: 100%; max-height: 100%; }
.pie-pago-texto { font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.pie-sello { margin: 1rem 0 0; }
.pie-sello img { display: block; width: 5rem; height: auto; }
.pie-apps { display: flex; flex-wrap: wrap; gap: 1rem 1.375rem; }
.pie-apps img { display: block; height: 2.5rem; width: auto; }
.pie-redes { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.pie-redes a { display: flex; align-items: center; justify-content: center; min-height: 1.5rem; }
.pie-redes img { display: block; height: 1.25rem; width: auto; }
.pie-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2rem;
  font-size: .75rem;
  line-height: .875rem;
}
.pie-legal p { margin: 0; }
.pie-legal ul { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }

@media (max-width: 40rem) {
  .estante { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-nav { flex-direction: column; }
  .pie-tarjetas { flex-direction: column; }
  .pie-legal { flex-direction: column; }
  .pie-legal ul { flex-direction: column; }
  .marca img { width: 8.5rem; }
  .cabecera-categorias { gap: 1rem; }
  .destacadas { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .portada { transition: none; }
  a.portada:hover { transform: none; }
}