# Folded paper map card

> A mountain route printed on an accordion map that unfolds into three panels with creases and paper shading.

- Category: [Cards](https://library.aimran.es/components/cards)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/uv-card-folded-map
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

Paper maps fold in a zigzag, and this card reproduces the gesture in 3D CSS: three nested panels rotate around their shared edges, the closed stack shows a printed cover, and opening it spreads the full route with contour lines, a river and a marching dashed trail. It fits hiking apps, travel guides, event venues and tourism sites.

The main color is the cover band, the route and the button, the second the river and cover contours. Replace the SVG map with your own drawing in the same 195 by 100 frame.

## Code

### HTML

```html
<div class="uvq07-map"><div class="mp"><div class="p1"><div class="fc fr"><span class="art" style="--o:0"><svg viewBox="0 0 195 100" aria-hidden="true"><path class="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100"/><g class="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)"/><ellipse class="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)"/><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)"/><ellipse class="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)"/></g><g class="fo"><circle cx="96" cy="16" r="2"/><circle cx="101" cy="16" r="2"/><circle cx="106" cy="16" r="2"/><circle cx="96" cy="21" r="2"/><circle cx="101" cy="21" r="2"/><circle cx="106" cy="21" r="2"/><circle cx="96" cy="26" r="2"/><circle cx="101" cy="26" r="2"/><circle cx="106" cy="26" r="2"/></g><path class="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82"/><path class="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34"/><path class="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z"/><circle class="pa" cx="18" cy="70" r="3"/><circle class="pb" cx="178" cy="34" r="3.4"/><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div class="p2"><div class="fc fr"><span class="art" style="--o:1"><svg viewBox="0 0 195 100" aria-hidden="true"><path class="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100"/><g class="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)"/><ellipse class="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)"/><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)"/><ellipse class="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)"/></g><g class="fo"><circle cx="96" cy="16" r="2"/><circle cx="101" cy="16" r="2"/><circle cx="106" cy="16" r="2"/><circle cx="96" cy="21" r="2"/><circle cx="101" cy="21" r="2"/><circle cx="106" cy="21" r="2"/><circle cx="96" cy="26" r="2"/><circle cx="101" cy="26" r="2"/><circle cx="106" cy="26" r="2"/></g><path class="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82"/><path class="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34"/><path class="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z"/><circle class="pa" cx="18" cy="70" r="3"/><circle class="pb" cx="178" cy="34" r="3.4"/><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div class="fc bk cv"><span class="k">Hiking map</span><b>Cares Trail</b><span class="ds">Picos de Europa<br>12 km · 4 h 30 min</span><i class="mi"></i><span class="sc">Scale 1:25,000</span></div><div class="p3"><div class="fc fr"><span class="art" style="--o:2"><svg viewBox="0 0 195 100" aria-hidden="true"><path class="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100"/><g class="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)"/><ellipse class="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)"/><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)"/><ellipse class="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)"/></g><g class="fo"><circle cx="96" cy="16" r="2"/><circle cx="101" cy="16" r="2"/><circle cx="106" cy="16" r="2"/><circle cx="96" cy="21" r="2"/><circle cx="101" cy="21" r="2"/><circle cx="106" cy="21" r="2"/><circle cx="96" cy="26" r="2"/><circle cx="101" cy="26" r="2"/><circle cx="106" cy="26" r="2"/></g><path class="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82"/><path class="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34"/><path class="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z"/><circle class="pa" cx="18" cy="70" r="3"/><circle class="pb" cx="178" cy="34" r="3.4"/><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div class="fc bk"></div></div></div></div></div><button type="button" aria-expanded="false" data-a="Unfold map" data-b="Fold map"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 4L3 6.5V20l6-2.5 6 2.5 6-2.5V4l-6 2.5zM9 4v13.5M15 6.5V20"/></svg><span>Unfold map</span></button></div>
```

### CSS

```css
.uvq07-map {
  --c1: #d2452f;
  --c2: #3c7fa8;
  --s: 16px;
  /* tamaño */
  --k: 1;
  /* velocidad */
  --fg: #1d1d1f;
  /* texto */
  --bg: #f5f5f7;
  /* fondo */
}

.uvq07-map {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  display: grid;
  justify-items: center;
  gap: 1.4em;
  width: 20em;
}

.uvq07-map .mp {
  position: relative;
  width: 19.5em;
  height: 10em;
  perspective: 60em;
}

.uvq07-map .mp::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.9em;
  width: var(--sw,7.5em);
  height: 1em;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(0,0,0,.3),transparent);
  transition: width calc(0.9s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq07-map.open .mp {
  --sw: 19em;
}

.uvq07-map .p1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 6.5em;
  height: 10em;
  transform-style: preserve-3d;
  transform: translateX(6.5em);
  transition: transform calc(0.9s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq07-map.open .p1 {
  transform: none;
}

.uvq07-map .p2,.uvq07-map .p3 {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transition: transform calc(0.9s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq07-map .p2 {
  transform: rotateY(-178deg);
  transition-delay: calc(0.18s / var(--k));
}

.uvq07-map .p3 {
  transform: rotateY(-176deg);
}

.uvq07-map.open .p2 {
  transform: none;
  transition-delay: 0s;
}

.uvq07-map.open .p3 {
  transform: none;
  transition-delay: calc(0.18s / var(--k));
}

.uvq07-map .fc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #f6f1e3;
}

.uvq07-map .bk {
  transform: rotateY(180deg);
}

.uvq07-map .art {
  position: absolute;
  top: 0;
  left: calc(var(--o) * -6.5em);
  width: 19.5em;
  height: 10em;
}

.uvq07-map .art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.uvq07-map .p1>.fr {
  border-radius: .3em 0 0 .3em;
  box-shadow: inset -.7em 0 .8em -.7em rgba(0,0,0,.2);
}

.uvq07-map .p2>.fr {
  box-shadow: inset .7em 0 .8em -.7em rgba(255,255,255,.7),inset -.7em 0 .8em -.7em rgba(0,0,0,.2);
}

.uvq07-map .p3>.fr {
  border-radius: 0 .3em .3em 0;
  box-shadow: inset .7em 0 .8em -.7em rgba(255,255,255,.7);
}

.uvq07-map .p3>.bk {
  border-radius: .3em 0 0 .3em;
  background: repeating-linear-gradient(0deg,rgba(60,80,90,.05) 0 1px,transparent 1px 6px),#efe8d6;
}

.uvq07-map .cv {
  display: flex;
  flex-direction: column;
  padding: .8em .75em;
  border-radius: .3em 0 0 .3em;
  color: #1f2a2e;
  background: linear-gradient(180deg,var(--c1) 0 4.7em,#f6f1e3 4.7em);
  box-shadow: 0 .3em .8em -.3em rgba(0,0,0,.3);
}

.uvq07-map .cv .k {
  font-size: .5em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.uvq07-map .cv b {
  margin-top: .3em;
  font-size: .95em;
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
}

.uvq07-map .cv .ds {
  margin-top: 1.1em;
  font-size: .62em;
  font-weight: 600;
  line-height: 1.4;
}

.uvq07-map .cv .mi {
  flex: 1;
  margin: .4em -.75em 0;
  background: repeating-radial-gradient(circle at 70% 130%,transparent 0 .35em,color-mix(in srgb,var(--c2) 40%,transparent) .35em .42em);
}

.uvq07-map .cv .sc {
  font: 600 .5em ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  opacity: .7;
}

.uvq07-map .gd {
  stroke: rgba(60,90,120,.12);
  stroke-width: .4;
}

.uvq07-map .cn ellipse {
  fill: none;
  stroke: #cdb88e;
  stroke-width: .5;
}

.uvq07-map .cn .ix {
  stroke: #ad9363;
  stroke-width: .9;
}

.uvq07-map .fo circle {
  fill: #8fb07a;
  opacity: .55;
}

.uvq07-map .rv {
  fill: none;
  stroke: var(--c2);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.uvq07-map .rt {
  fill: none;
  stroke: var(--c1);
  stroke-width: 1.6;
  stroke-dasharray: 3 2;
  stroke-linecap: round;
}

.uvq07-map.open .rt {
  animation: uvq07-map calc(1.2s / var(--k)) linear infinite;
}

.uvq07-map .pk {
  fill: #6b5a40;
}

.uvq07-map .pa {
  fill: #fff;
  stroke: var(--c1);
  stroke-width: 1.2;
}

.uvq07-map .pb {
  fill: var(--c1);
  stroke: #fff;
  stroke-width: 1.2;
}

.uvq07-map text {
  font-family: system-ui,sans-serif;
  font-size: 4.6px;
  font-weight: 700;
  fill: #3a3a33;
}

.uvq07-map button {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .65em 1.15em;
  border-radius: 2em;
  font-size: .9em;
  font-weight: 700;
  color: #fff;
  background: var(--c1);
  box-shadow: 0 .5em 1em -.5em var(--c1);
  transition: transform calc(0.3s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq07-map button svg {
  width: 1.15em;
  height: 1.15em;
}

.uvq07-map button:hover {
  transform: translateY(-2px);
}

.uvq07-map button:active {
  transform: scale(.95);
}

.uvq07-map button:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

@keyframes uvq07-map {
  to {
    stroke-dashoffset: -5;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq07-map,.uvq07-map *,.uvq07-map *::before,.uvq07-map *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
```

### JavaScript

```js
document.querySelectorAll(".uvq07-map").forEach(el => {
  const b=el.querySelector("button"),s=b.querySelector("span");b.addEventListener("click",()=>{const on=b.getAttribute("aria-expanded")!=="true";b.setAttribute("aria-expanded",String(on));el.classList.toggle("open",on);s.textContent=on?b.dataset.b:b.dataset.a})
});
```

### React

```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
.uvq07-map {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  display: grid;
  justify-items: center;
  gap: 1.4em;
  width: 20em;
}

.uvq07-map .mp {
  position: relative;
  width: 19.5em;
  height: 10em;
  perspective: 60em;
}

.uvq07-map .mp::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.9em;
  width: var(--sw,7.5em);
  height: 1em;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(0,0,0,.3),transparent);
  transition: width calc(0.9s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq07-map.open .mp {
  --sw: 19em;
}

.uvq07-map .p1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 6.5em;
  height: 10em;
  transform-style: preserve-3d;
  transform: translateX(6.5em);
  transition: transform calc(0.9s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq07-map.open .p1 {
  transform: none;
}

.uvq07-map .p2,.uvq07-map .p3 {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transition: transform calc(0.9s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq07-map .p2 {
  transform: rotateY(-178deg);
  transition-delay: calc(0.18s / var(--k));
}

.uvq07-map .p3 {
  transform: rotateY(-176deg);
}

.uvq07-map.open .p2 {
  transform: none;
  transition-delay: 0s;
}

.uvq07-map.open .p3 {
  transform: none;
  transition-delay: calc(0.18s / var(--k));
}

.uvq07-map .fc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #f6f1e3;
}

.uvq07-map .bk {
  transform: rotateY(180deg);
}

.uvq07-map .art {
  position: absolute;
  top: 0;
  left: calc(var(--o) * -6.5em);
  width: 19.5em;
  height: 10em;
}

.uvq07-map .art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.uvq07-map .p1>.fr {
  border-radius: .3em 0 0 .3em;
  box-shadow: inset -.7em 0 .8em -.7em rgba(0,0,0,.2);
}

.uvq07-map .p2>.fr {
  box-shadow: inset .7em 0 .8em -.7em rgba(255,255,255,.7),inset -.7em 0 .8em -.7em rgba(0,0,0,.2);
}

.uvq07-map .p3>.fr {
  border-radius: 0 .3em .3em 0;
  box-shadow: inset .7em 0 .8em -.7em rgba(255,255,255,.7);
}

.uvq07-map .p3>.bk {
  border-radius: .3em 0 0 .3em;
  background: repeating-linear-gradient(0deg,rgba(60,80,90,.05) 0 1px,transparent 1px 6px),#efe8d6;
}

.uvq07-map .cv {
  display: flex;
  flex-direction: column;
  padding: .8em .75em;
  border-radius: .3em 0 0 .3em;
  color: #1f2a2e;
  background: linear-gradient(180deg,var(--c1) 0 4.7em,#f6f1e3 4.7em);
  box-shadow: 0 .3em .8em -.3em rgba(0,0,0,.3);
}

.uvq07-map .cv .k {
  font-size: .5em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.uvq07-map .cv b {
  margin-top: .3em;
  font-size: .95em;
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
}

.uvq07-map .cv .ds {
  margin-top: 1.1em;
  font-size: .62em;
  font-weight: 600;
  line-height: 1.4;
}

.uvq07-map .cv .mi {
  flex: 1;
  margin: .4em -.75em 0;
  background: repeating-radial-gradient(circle at 70% 130%,transparent 0 .35em,color-mix(in srgb,var(--c2) 40%,transparent) .35em .42em);
}

.uvq07-map .cv .sc {
  font: 600 .5em ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  opacity: .7;
}

.uvq07-map .gd {
  stroke: rgba(60,90,120,.12);
  stroke-width: .4;
}

.uvq07-map .cn ellipse {
  fill: none;
  stroke: #cdb88e;
  stroke-width: .5;
}

.uvq07-map .cn .ix {
  stroke: #ad9363;
  stroke-width: .9;
}

.uvq07-map .fo circle {
  fill: #8fb07a;
  opacity: .55;
}

.uvq07-map .rv {
  fill: none;
  stroke: var(--c2);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.uvq07-map .rt {
  fill: none;
  stroke: var(--c1);
  stroke-width: 1.6;
  stroke-dasharray: 3 2;
  stroke-linecap: round;
}

.uvq07-map.open .rt {
  animation: uvq07-map calc(1.2s / var(--k)) linear infinite;
}

.uvq07-map .pk {
  fill: #6b5a40;
}

.uvq07-map .pa {
  fill: #fff;
  stroke: var(--c1);
  stroke-width: 1.2;
}

.uvq07-map .pb {
  fill: var(--c1);
  stroke: #fff;
  stroke-width: 1.2;
}

.uvq07-map text {
  font-family: system-ui,sans-serif;
  font-size: 4.6px;
  font-weight: 700;
  fill: #3a3a33;
}

.uvq07-map button {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .65em 1.15em;
  border-radius: 2em;
  font-size: .9em;
  font-weight: 700;
  color: #fff;
  background: var(--c1);
  box-shadow: 0 .5em 1em -.5em var(--c1);
  transition: transform calc(0.3s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq07-map button svg {
  width: 1.15em;
  height: 1.15em;
}

.uvq07-map button:hover {
  transform: translateY(-2px);
}

.uvq07-map button:active {
  transform: scale(.95);
}

.uvq07-map button:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

@keyframes uvq07-map {
  to {
    stroke-dashoffset: -5;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq07-map,.uvq07-map *,.uvq07-map *::before,.uvq07-map *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const b=el.querySelector("button"),s=b.querySelector("span");b.addEventListener("click",()=>{const on=b.getAttribute("aria-expanded")!=="true";b.setAttribute("aria-expanded",String(on));el.classList.toggle("open",on);s.textContent=on?b.dataset.b:b.dataset.a})
}

export default function CardFoldedMap() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#d2452f",
          "--c2": "#3c7fa8",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq07-map"><div className="mp"><div className="p1"><div className="fc fr"><span className="art" style={{ "--o": "0" } as CSSProperties}><svg viewBox="0 0 195 100" aria-hidden="true"><path className="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100" /><g className="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)" /><ellipse className="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)" /><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)" /><ellipse className="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)" /></g><g className="fo"><circle cx="96" cy="16" r="2" /><circle cx="101" cy="16" r="2" /><circle cx="106" cy="16" r="2" /><circle cx="96" cy="21" r="2" /><circle cx="101" cy="21" r="2" /><circle cx="106" cy="21" r="2" /><circle cx="96" cy="26" r="2" /><circle cx="101" cy="26" r="2" /><circle cx="106" cy="26" r="2" /></g><path className="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82" /><path className="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34" /><path className="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z" /><circle className="pa" cx="18" cy="70" r="3" /><circle className="pb" cx="178" cy="34" r="3.4" /><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div className="p2"><div className="fc fr"><span className="art" style={{ "--o": "1" } as CSSProperties}><svg viewBox="0 0 195 100" aria-hidden="true"><path className="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100" /><g className="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)" /><ellipse className="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)" /><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)" /><ellipse className="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)" /></g><g className="fo"><circle cx="96" cy="16" r="2" /><circle cx="101" cy="16" r="2" /><circle cx="106" cy="16" r="2" /><circle cx="96" cy="21" r="2" /><circle cx="101" cy="21" r="2" /><circle cx="106" cy="21" r="2" /><circle cx="96" cy="26" r="2" /><circle cx="101" cy="26" r="2" /><circle cx="106" cy="26" r="2" /></g><path className="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82" /><path className="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34" /><path className="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z" /><circle className="pa" cx="18" cy="70" r="3" /><circle className="pb" cx="178" cy="34" r="3.4" /><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div className="fc bk cv"><span className="k">Hiking map</span><b>Cares Trail</b><span className="ds">Picos de Europa<br />12 km · 4 h 30 min</span><i className="mi"></i><span className="sc">Scale 1:25,000</span></div><div className="p3"><div className="fc fr"><span className="art" style={{ "--o": "2" } as CSSProperties}><svg viewBox="0 0 195 100" aria-hidden="true"><path className="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100" /><g className="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)" /><ellipse className="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)" /><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)" /><ellipse className="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)" /></g><g className="fo"><circle cx="96" cy="16" r="2" /><circle cx="101" cy="16" r="2" /><circle cx="106" cy="16" r="2" /><circle cx="96" cy="21" r="2" /><circle cx="101" cy="21" r="2" /><circle cx="106" cy="21" r="2" /><circle cx="96" cy="26" r="2" /><circle cx="101" cy="26" r="2" /><circle cx="106" cy="26" r="2" /></g><path className="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82" /><path className="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34" /><path className="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z" /><circle className="pa" cx="18" cy="70" r="3" /><circle className="pb" cx="178" cy="34" r="3.4" /><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div className="fc bk"></div></div></div></div></div><button type="button" aria-expanded="false" data-a="Unfold map" data-b="Fold map"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M9 4L3 6.5V20l6-2.5 6 2.5 6-2.5V4l-6 2.5zM9 4v13.5M15 6.5V20" /></svg><span>Unfold map</span></button></div>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Folded paper map card” block (Cards) from AIMRAN Library to my project.

## What it is
A mountain route printed on an accordion map that unfolds into three panels with creases and paper shading.

## Chosen settings
- Main color: #d2452f
- Secondary color: #3c7fa8
- Size: 16px (from 12 to 24px)
- Speed: 1x (from 0.5 to 2x)
- Text: "Ruta del Cares"

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
.uvq07-map {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  display: grid;
  justify-items: center;
  gap: 1.4em;
  width: 20em;
}

.uvq07-map .mp {
  position: relative;
  width: 19.5em;
  height: 10em;
  perspective: 60em;
}

.uvq07-map .mp::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.9em;
  width: var(--sw,7.5em);
  height: 1em;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(0,0,0,.3),transparent);
  transition: width calc(0.9s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq07-map.open .mp {
  --sw: 19em;
}

.uvq07-map .p1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 6.5em;
  height: 10em;
  transform-style: preserve-3d;
  transform: translateX(6.5em);
  transition: transform calc(0.9s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq07-map.open .p1 {
  transform: none;
}

.uvq07-map .p2,.uvq07-map .p3 {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transition: transform calc(0.9s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq07-map .p2 {
  transform: rotateY(-178deg);
  transition-delay: calc(0.18s / var(--k));
}

.uvq07-map .p3 {
  transform: rotateY(-176deg);
}

.uvq07-map.open .p2 {
  transform: none;
  transition-delay: 0s;
}

.uvq07-map.open .p3 {
  transform: none;
  transition-delay: calc(0.18s / var(--k));
}

.uvq07-map .fc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #f6f1e3;
}

.uvq07-map .bk {
  transform: rotateY(180deg);
}

.uvq07-map .art {
  position: absolute;
  top: 0;
  left: calc(var(--o) * -6.5em);
  width: 19.5em;
  height: 10em;
}

.uvq07-map .art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.uvq07-map .p1>.fr {
  border-radius: .3em 0 0 .3em;
  box-shadow: inset -.7em 0 .8em -.7em rgba(0,0,0,.2);
}

.uvq07-map .p2>.fr {
  box-shadow: inset .7em 0 .8em -.7em rgba(255,255,255,.7),inset -.7em 0 .8em -.7em rgba(0,0,0,.2);
}

.uvq07-map .p3>.fr {
  border-radius: 0 .3em .3em 0;
  box-shadow: inset .7em 0 .8em -.7em rgba(255,255,255,.7);
}

.uvq07-map .p3>.bk {
  border-radius: .3em 0 0 .3em;
  background: repeating-linear-gradient(0deg,rgba(60,80,90,.05) 0 1px,transparent 1px 6px),#efe8d6;
}

.uvq07-map .cv {
  display: flex;
  flex-direction: column;
  padding: .8em .75em;
  border-radius: .3em 0 0 .3em;
  color: #1f2a2e;
  background: linear-gradient(180deg,var(--c1) 0 4.7em,#f6f1e3 4.7em);
  box-shadow: 0 .3em .8em -.3em rgba(0,0,0,.3);
}

.uvq07-map .cv .k {
  font-size: .5em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.uvq07-map .cv b {
  margin-top: .3em;
  font-size: .95em;
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
}

.uvq07-map .cv .ds {
  margin-top: 1.1em;
  font-size: .62em;
  font-weight: 600;
  line-height: 1.4;
}

.uvq07-map .cv .mi {
  flex: 1;
  margin: .4em -.75em 0;
  background: repeating-radial-gradient(circle at 70% 130%,transparent 0 .35em,color-mix(in srgb,var(--c2) 40%,transparent) .35em .42em);
}

.uvq07-map .cv .sc {
  font: 600 .5em ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  opacity: .7;
}

.uvq07-map .gd {
  stroke: rgba(60,90,120,.12);
  stroke-width: .4;
}

.uvq07-map .cn ellipse {
  fill: none;
  stroke: #cdb88e;
  stroke-width: .5;
}

.uvq07-map .cn .ix {
  stroke: #ad9363;
  stroke-width: .9;
}

.uvq07-map .fo circle {
  fill: #8fb07a;
  opacity: .55;
}

.uvq07-map .rv {
  fill: none;
  stroke: var(--c2);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.uvq07-map .rt {
  fill: none;
  stroke: var(--c1);
  stroke-width: 1.6;
  stroke-dasharray: 3 2;
  stroke-linecap: round;
}

.uvq07-map.open .rt {
  animation: uvq07-map calc(1.2s / var(--k)) linear infinite;
}

.uvq07-map .pk {
  fill: #6b5a40;
}

.uvq07-map .pa {
  fill: #fff;
  stroke: var(--c1);
  stroke-width: 1.2;
}

.uvq07-map .pb {
  fill: var(--c1);
  stroke: #fff;
  stroke-width: 1.2;
}

.uvq07-map text {
  font-family: system-ui,sans-serif;
  font-size: 4.6px;
  font-weight: 700;
  fill: #3a3a33;
}

.uvq07-map button {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .65em 1.15em;
  border-radius: 2em;
  font-size: .9em;
  font-weight: 700;
  color: #fff;
  background: var(--c1);
  box-shadow: 0 .5em 1em -.5em var(--c1);
  transition: transform calc(0.3s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq07-map button svg {
  width: 1.15em;
  height: 1.15em;
}

.uvq07-map button:hover {
  transform: translateY(-2px);
}

.uvq07-map button:active {
  transform: scale(.95);
}

.uvq07-map button:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

@keyframes uvq07-map {
  to {
    stroke-dashoffset: -5;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq07-map,.uvq07-map *,.uvq07-map *::before,.uvq07-map *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const b=el.querySelector("button"),s=b.querySelector("span");b.addEventListener("click",()=>{const on=b.getAttribute("aria-expanded")!=="true";b.setAttribute("aria-expanded",String(on));el.classList.toggle("open",on);s.textContent=on?b.dataset.b:b.dataset.a})
}

export default function CardFoldedMap() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#d2452f",
          "--c2": "#3c7fa8",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq07-map"><div className="mp"><div className="p1"><div className="fc fr"><span className="art" style={{ "--o": "0" } as CSSProperties}><svg viewBox="0 0 195 100" aria-hidden="true"><path className="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100" /><g className="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)" /><ellipse className="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)" /><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)" /><ellipse className="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)" /></g><g className="fo"><circle cx="96" cy="16" r="2" /><circle cx="101" cy="16" r="2" /><circle cx="106" cy="16" r="2" /><circle cx="96" cy="21" r="2" /><circle cx="101" cy="21" r="2" /><circle cx="106" cy="21" r="2" /><circle cx="96" cy="26" r="2" /><circle cx="101" cy="26" r="2" /><circle cx="106" cy="26" r="2" /></g><path className="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82" /><path className="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34" /><path className="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z" /><circle className="pa" cx="18" cy="70" r="3" /><circle className="pb" cx="178" cy="34" r="3.4" /><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div className="p2"><div className="fc fr"><span className="art" style={{ "--o": "1" } as CSSProperties}><svg viewBox="0 0 195 100" aria-hidden="true"><path className="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100" /><g className="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)" /><ellipse className="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)" /><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)" /><ellipse className="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)" /></g><g className="fo"><circle cx="96" cy="16" r="2" /><circle cx="101" cy="16" r="2" /><circle cx="106" cy="16" r="2" /><circle cx="96" cy="21" r="2" /><circle cx="101" cy="21" r="2" /><circle cx="106" cy="21" r="2" /><circle cx="96" cy="26" r="2" /><circle cx="101" cy="26" r="2" /><circle cx="106" cy="26" r="2" /></g><path className="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82" /><path className="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34" /><path className="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z" /><circle className="pa" cx="18" cy="70" r="3" /><circle className="pb" cx="178" cy="34" r="3.4" /><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div className="fc bk cv"><span className="k">Hiking map</span><b>Cares Trail</b><span className="ds">Picos de Europa<br />12 km · 4 h 30 min</span><i className="mi"></i><span className="sc">Scale 1:25,000</span></div><div className="p3"><div className="fc fr"><span className="art" style={{ "--o": "2" } as CSSProperties}><svg viewBox="0 0 195 100" aria-hidden="true"><path className="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100" /><g className="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)" /><ellipse className="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)" /><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)" /><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)" /><ellipse className="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)" /><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)" /></g><g className="fo"><circle cx="96" cy="16" r="2" /><circle cx="101" cy="16" r="2" /><circle cx="106" cy="16" r="2" /><circle cx="96" cy="21" r="2" /><circle cx="101" cy="21" r="2" /><circle cx="106" cy="21" r="2" /><circle cx="96" cy="26" r="2" /><circle cx="101" cy="26" r="2" /><circle cx="106" cy="26" r="2" /></g><path className="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82" /><path className="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34" /><path className="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z" /><circle className="pa" cx="18" cy="70" r="3" /><circle className="pb" cx="178" cy="34" r="3.4" /><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div className="fc bk"></div></div></div></div></div><button type="button" aria-expanded="false" data-a="Unfold map" data-b="Fold map"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M9 4L3 6.5V20l6-2.5 6 2.5 6-2.5V4l-6 2.5zM9 4v13.5M15 6.5V20" /></svg><span>Unfold map</span></button></div>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````