@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('/fonts/publicsans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('/fonts/publicsans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('/fonts/publicsans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --marca: #4b7eb0;       /* azul del logo original */
  --marca-profundo: #3d6fa3;
  --hilo: #2f5f94;        /* azul para texto y botones (contraste AA sobre blanco) */
  --hilo-oscuro: #234a75;
  --tinta: #152238;
  --tinta-suave: #44536b;
  --cinta: #f5c542;       /* cinta métrica */
  --tela: #e4ecf6;
  --azul-noche: #1c3a60;  /* pie */
  --pespunte: #8aa3c7;
  --blanco: #ffffff;

  --display: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --texto: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --medida: 68ch;
  --ancho: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--texto);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
/* nada de lo que entra animado (parche, perchas, fotos…) puede ensanchar la página en móvil.
   clip, y no hidden, para no romper position: sticky ni las animaciones ligadas al scroll */
main { overflow-x: clip; }
a { color: var(--hilo); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--hilo-oscuro); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--hilo); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-weight: 800; font-size: clamp(2.4rem, 6.2vw, 4.6rem); letter-spacing: -.03em; }
h2 { font-weight: 800; font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
p, ul, ol, dl { margin: 0 0 1em; }
.prosa { max-width: var(--medida); }
.prosa h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 3vw, 2rem); }
.prosa li { margin-bottom: .35em; }
.entradilla { font-size: 1.2rem; color: var(--tinta-suave); max-width: 56ch; }

.salto { position: absolute; left: -9999px; }
.salto:focus { left: 1rem; top: 1rem; background: var(--blanco); padding: .5rem 1rem; z-index: 10; }

.envoltorio { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion--tela { background: var(--tela); }
.seccion__cabecera { max-width: 46rem; margin-bottom: 2.5rem; }
.seccion__cabecera p { color: var(--tinta-suave); font-size: 1.1rem; }

/* Superficies con el azul del logo.
   Blanco sobre #4b7eb0 da 4,3:1: solo texto grande (24px) o negrita 700 desde 18,7px. */
.cabecera, .hero, .llamada, .migas, .cabecera-pagina { background: var(--marca); color: var(--blanco); }
:is(.cabecera, .hero, .llamada, .migas, .cabecera-pagina) :focus-visible { outline-color: var(--cinta); }
:is(.hero, .llamada, .cabecera-pagina) h1, :is(.hero, .llamada, .cabecera-pagina) h2 { color: var(--blanco); }
:is(.hero, .llamada, .cabecera-pagina) .entradilla, .llamada p { color: var(--blanco); font-size: 1.5rem; line-height: 1.4; }
/* en las páginas interiores la franja azul ocupa todo el ancho aunque el contenido vaya centrado */
.migas, .cabecera-pagina { box-shadow: 0 0 0 100vmax var(--marca); clip-path: inset(0 -100vmax); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.3rem; border-radius: 999px;
  background: var(--hilo); color: var(--blanco);
  font-weight: 600; text-decoration: none; line-height: 1.2;
}
.boton:hover { background: var(--hilo-oscuro); color: var(--blanco); }
.boton--claro { background: var(--blanco); color: var(--hilo); box-shadow: inset 0 0 0 2px var(--hilo); }
.boton--claro:hover { background: var(--tela); color: var(--hilo-oscuro); }
/* Botones sobre azul: amarillo cinta y blanco */
:is(.hero, .llamada, .cabecera-pagina) .boton { background: var(--cinta); color: var(--tinta); box-shadow: none; }
:is(.hero, .llamada, .cabecera-pagina) .boton:hover { background: #ffd65e; color: var(--tinta); }
:is(.hero, .llamada, .cabecera-pagina) .boton--claro { background: var(--blanco); color: var(--hilo); }
:is(.hero, .llamada, .cabecera-pagina) .boton--claro:hover { background: var(--tela); color: var(--hilo-oscuro); }
.boton svg { width: 1.1em; height: 1.1em; flex: none; }

/* Cabecera */
.cabecera { position: relative; z-index: 5; }
.cabecera .envoltorio { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tinta); }
.marca { gap: .75rem; }
.logo { height: 3.4rem; width: auto; display: block; }
.cabecera .logo { margin-left: -.55rem; } /* el recuadro del logo es invisible sobre el mismo azul: se alinean las letras */
.marca__texto { font: 600 .82rem/1.15 var(--texto); color: var(--tinta-suave); }
.logo__agujeros { transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1); }
.marca:hover .logo__agujeros, .marca:focus-visible .logo__agujeros { transform: rotate(90deg); }
.cabecera .logo__agujeros { animation: girar 1.1s .25s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes girar { from { transform: rotate(-180deg); } }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; align-items: center; }
.menu a { text-decoration: none; color: var(--blanco); font-weight: 700; font-size: 1.17rem; padding-block: .4rem; }
.menu a:hover, .menu a[aria-current='page'] { color: var(--blanco); box-shadow: 0 3px 0 var(--cinta); }
.menu__boton { display: none; }

/* Móvil: el <details> funciona como botón; el menú se muestra cuando está abierto. Sin JavaScript. */
@media (max-width: 860px) {
  .menu__boton { display: block; }
  .menu__boton summary {
    display: inline-flex; align-items: center; cursor: pointer; list-style: none;
    font-weight: 700; font-size: 1.17rem; padding: .5rem 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--blanco); color: var(--blanco);
  }
  .menu__boton summary::-webkit-details-marker { display: none; }
  .menu__boton[open] summary { background: var(--blanco); color: var(--hilo); }
  .cabecera:has(.menu__boton:not([open])) .menu { display: none; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; }
  .menu ul {
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--marca); border-bottom: 3px dashed var(--cinta);
    padding: .5rem var(--gutter) 1rem;
  }
  .menu li a { display: block; padding: .8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .25); }
  .menu a[aria-current='page'] { box-shadow: none; }
}

/* Hero con cinta métrica */
.hero { position: relative; overflow: hidden; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(7.5rem, 14vw, 8.5rem); }
.hero__rejilla { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__visual { position: relative; z-index: 2; justify-self: center; width: min(100%, 23rem); margin-bottom: calc(-1 * clamp(4rem, 9vw, 6.5rem)); }
.boton-hero { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 20px rgba(12, 32, 62, .35)); }
.boton-hero__cuerpo { transform-box: fill-box; transform-origin: center; animation: asentar 1.1s cubic-bezier(.2, .9, .3, 1.12) both; }
.hilo { fill: none; stroke: var(--cinta); stroke-width: 13; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: coser .35s ease-in forwards; }
.hilo--1 { animation-delay: .95s; }
.hilo--2 { animation-delay: 1.3s; }
.hilo--cola { stroke-width: 6; animation-duration: 1s; animation-delay: 1.6s; animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
.hero .cinta { animation: desenrollar 1.2s .35s cubic-bezier(.6, 0, .2, 1) both; }
@supports (animation-timeline: scroll()) {
  .hero .cinta { animation: desenrollar 1.2s .35s cubic-bezier(.6, 0, .2, 1) both, tirar-fondo linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
  .hero .cinta span { animation: tirar linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
}
@keyframes tirar-fondo { to { background-position: -320px 0, -320px 0, 0 0; } }
@keyframes tirar { to { transform: translateX(-320px); } }

/* Clic en el botón: se descose y se vuelve a coser */
.recosiendo .boton-hero__cuerpo { animation: sacudir .5s cubic-bezier(.3, 1.6, .5, 1); }
.recosiendo .hilo { animation-name: recoser; }
.recosiendo .hilo--1 { animation-delay: .3s; }
.recosiendo .hilo--2 { animation-delay: .65s; }
.recosiendo .hilo--cola { animation-delay: .95s; }
@keyframes sacudir { 30% { transform: rotate(-25deg) scale(.94); } }
@keyframes recoser { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes asentar { from { transform: rotate(-140deg) scale(.55); opacity: 0; } 60% { opacity: 1; } }
@keyframes coser { to { stroke-dashoffset: 0; } }
@keyframes desenrollar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero h1 { max-width: 13ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero__tiendas { display: grid; gap: 1rem; }

.cinta {
  --alto: 3.4rem;
  z-index: 1;
  color: var(--tinta);
  position: absolute; left: -5%; right: -5%; bottom: 2.2rem; height: var(--alto);
  transform: rotate(-2.2deg);
  background:
    repeating-linear-gradient(90deg, var(--tinta) 0 1.5px, transparent 1.5px 40px) top left / 100% 48% no-repeat,
    repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 8px) top left / 100% 24% no-repeat,
    var(--cinta);
  box-shadow: 0 1px 0 rgba(21, 34, 56, .25), 0 -1px 0 rgba(21, 34, 56, .12);
  display: flex; align-items: flex-end; overflow: hidden; white-space: nowrap;
}
.cinta span {
  font: 600 .95rem/1 var(--display); color: var(--tinta); padding: 0 0 .55rem 0;
  word-spacing: .1em;
}
.cinta span b { font-weight: 800; margin-inline: 1.2rem 2.6rem; }

/* Franja de teléfonos bajo el hero */
.franja { padding-block: 1.25rem clamp(2.5rem, 5vw, 3.5rem); }
.franja__rejilla { display: flex; flex-wrap: wrap; gap: 1rem 3rem; }
.franja p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem; }
.franja strong { font: 600 1.05rem/1.2 var(--display); }
.franja span { color: var(--tinta-suave); font-size: .95rem; }
.franja a { display: inline-flex; align-items: center; gap: .35rem; font: 800 1.2rem/1.2 var(--display); text-decoration: none; }
.franja a svg { width: 1rem; height: 1rem; }

/* Fichas de tienda */
.tienda {
  background: var(--blanco); border-radius: var(--radio);
  outline: 2px dashed var(--pespunte); outline-offset: -8px;
  padding: 1.5rem 1.6rem;
}
.seccion--tela .tienda { background: var(--blanco); }
.hero .tienda { background: var(--tela); }
.tienda h3, .tienda h2 { margin-bottom: .35rem; }
.tienda h2 { font-size: 1.5rem; letter-spacing: -.01em; }
.estado { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: .92rem; font-weight: 600; color: var(--tinta-suave); }
.estado::before { content: ''; width: .7rem; height: .7rem; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.estado--abierta { color: var(--hilo); }
.estado--abierta::before { background: currentColor; }
.tienda address { font-style: normal; color: var(--tinta-suave); margin-bottom: .75rem; }
.tienda__tel { font: 800 1.35rem/1.2 var(--display); text-decoration: none; letter-spacing: -.01em; }
.tienda__horario { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 1rem 0; font-size: .97rem; }
.tienda__horario dt { font-weight: 600; }
.tienda__horario dd { margin: 0; }
.tienda__pie { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; font-size: .95rem; }
.valoracion { color: var(--tinta-suave); }
.valoracion strong { color: var(--tinta); }

.tiendas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; }

/* Cómo trabajamos: cinta métrica, aguja que cose y pasos que se cosen al llegar la aguja */
.como { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.pista { position: relative; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; position: relative; padding-top: 5.75rem; }
.pasos::before { /* la cinta */
  content: ''; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 0; height: 2.6rem;
  background:
    repeating-linear-gradient(90deg, var(--tinta) 0 1.5px, transparent 1.5px 40px) top left / 100% 45% no-repeat,
    repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 8px) top left / 100% 22% no-repeat,
    var(--cinta);
}
.pasos::after { /* el pespunte */
  content: ''; position: absolute; left: 0; right: 0; top: 3.5rem; border-top: 3px dashed var(--hilo);
}
.pasos li { position: relative; }
.pasos__num { /* cada paso es un botón cosido a la cinta */
  position: absolute; top: -5.6rem; left: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; font: 800 1.2rem/1 var(--display);
  background: var(--marca); color: var(--blanco); box-shadow: inset 0 0 0 3px var(--marca-profundo), 0 3px 6px rgba(21, 34, 56, .3);
}
.pasos__icono { display: block; width: 3rem; height: 3rem; color: var(--hilo); margin-bottom: .6rem; }
.pasos__icono * { stroke-dasharray: 1; }
.pasos h3 { font-size: 1.45rem; }
.pasos p { color: var(--tinta-suave); font-size: 1rem; }
.aguja { display: none; position: absolute; top: calc(3.5rem - clamp(7.5rem, 9vw, 10rem) / 8); left: 0; width: clamp(7.5rem, 9vw, 10rem); z-index: 2; transform: translateX(-94%); pointer-events: none; }
.aguja svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 3px 3px rgba(21, 34, 56, .25)); transform-origin: 94% 50%; }

@keyframes pespunte { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pespunte-v { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes boton-cosido { from { transform: scale(.2) rotate(-240deg); background: var(--cinta); color: var(--cinta); box-shadow: none; } 70% { transform: scale(1.25) rotate(10deg); } }
@keyframes dibujar { from { stroke-dashoffset: 1; opacity: 0; } 4% { opacity: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparecer-paso { from { opacity: .12; transform: translateY(1rem); } }
@keyframes aguja-avanza { from { left: 0%; } to { left: 100%; } }
@keyframes puntada { 0.00% { transform: translateY(5px) rotate(8deg); } 2.78% { transform: translateY(-7px) rotate(-10deg); } 5.56% { transform: translateY(5px) rotate(8deg); } 8.33% { transform: translateY(-7px) rotate(-10deg); } 11.11% { transform: translateY(5px) rotate(8deg); } 13.89% { transform: translateY(-7px) rotate(-10deg); } 16.67% { transform: translateY(5px) rotate(8deg); } 19.44% { transform: translateY(-7px) rotate(-10deg); } 22.22% { transform: translateY(5px) rotate(8deg); } 25.00% { transform: translateY(-7px) rotate(-10deg); } 27.78% { transform: translateY(5px) rotate(8deg); } 30.56% { transform: translateY(-7px) rotate(-10deg); } 33.33% { transform: translateY(5px) rotate(8deg); } 36.11% { transform: translateY(-7px) rotate(-10deg); } 38.89% { transform: translateY(5px) rotate(8deg); } 41.67% { transform: translateY(-7px) rotate(-10deg); } 44.44% { transform: translateY(5px) rotate(8deg); } 47.22% { transform: translateY(-7px) rotate(-10deg); } 50.00% { transform: translateY(5px) rotate(8deg); } 52.78% { transform: translateY(-7px) rotate(-10deg); } 55.56% { transform: translateY(5px) rotate(8deg); } 58.33% { transform: translateY(-7px) rotate(-10deg); } 61.11% { transform: translateY(5px) rotate(8deg); } 63.89% { transform: translateY(-7px) rotate(-10deg); } 66.67% { transform: translateY(5px) rotate(8deg); } 69.44% { transform: translateY(-7px) rotate(-10deg); } 72.22% { transform: translateY(5px) rotate(8deg); } 75.00% { transform: translateY(-7px) rotate(-10deg); } 77.78% { transform: translateY(5px) rotate(8deg); } 80.56% { transform: translateY(-7px) rotate(-10deg); } 83.33% { transform: translateY(5px) rotate(8deg); } 86.11% { transform: translateY(-7px) rotate(-10deg); } 88.89% { transform: translateY(5px) rotate(8deg); } 91.67% { transform: translateY(-7px) rotate(-10deg); } 94.44% { transform: translateY(5px) rotate(8deg); } 97.22% { transform: translateY(-7px) rotate(-10deg); } 100.00% { transform: translateY(5px) rotate(8deg); } }

/* Móvil y navegadores sin fijado: cada paso se cose al entrar en pantalla */
@supports (animation-timeline: view()) {
  .pasos::after { animation: pespunte linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  .pasos__num { animation: boton-cosido cubic-bezier(.3, 1.2, .5, 1) both; animation-timeline: view(); animation-range: entry 60% cover 35%; }
  .pasos__icono * { animation: dibujar linear both; animation-timeline: view(); animation-range: entry 70% cover 45%; }
  .pasos li > :is(h3, p) { animation: aparecer-paso linear both; animation-timeline: view(); animation-range: entry 70% cover 40%; }
}

/* Escritorio: la sección se queda fija y la aguja recorre la cinta con el scroll */
@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
    .como { view-timeline-name: --como; height: 300vh; padding-block: 0; }
    .como__fijo { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-block: 3rem; }
    .como__fijo > .envoltorio { width: 100%; }
    .aguja { display: block; animation: aguja-avanza linear both; animation-timeline: --como; animation-range: contain 2% contain 82%; }
    .aguja svg { animation: puntada linear both; animation-timeline: --como; animation-range: contain 2% contain 82%; }
    .pasos::after { animation: pespunte linear both; animation-timeline: --como; animation-range: contain 2% contain 82%; }
    .pasos li:nth-child(1) { --r0: 0%; --r1: 12%; }
    .pasos li:nth-child(2) { --r0: 21%; --r1: 33%; }
    .pasos li:nth-child(3) { --r0: 41%; --r1: 53%; }
    .pasos li:nth-child(4) { --r0: 61%; --r1: 73%; }
    .pasos__num, .pasos__icono *, .pasos li > :is(h3, p) { animation-timeline: --como; animation-range: contain var(--r0) contain var(--r1); }
  }
}

@media (max-width: 900px) {
  .pasos { grid-template-columns: 1fr; padding-top: 0; padding-left: 4.75rem; gap: 2.25rem; }
  .pasos::before {
    left: 0; right: auto; top: 0; bottom: 0; width: 2.6rem; height: auto;
    background:
      repeating-linear-gradient(180deg, var(--tinta) 0 1.5px, transparent 1.5px 40px) top left / 45% 100% no-repeat,
      repeating-linear-gradient(180deg, var(--tinta) 0 1px, transparent 1px 8px) top left / 22% 100% no-repeat,
      var(--cinta);
  }
  .pasos::after { left: calc(2.6rem + .8rem); right: auto; top: 0; bottom: 0; border-top: 0; border-left: 3px dashed var(--hilo); }
  @supports (animation-timeline: view()) { .pasos::after { animation-name: pespunte-v; } }
  .pasos__num { top: 0; left: -4.65rem; }
}

/* Qué arreglamos: el perchero del taller */
.perchero {
  --alto-barra: 10px;
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .5rem;
  padding-top: 4px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.perchero::before { /* la barra metálica */
  content: ''; position: absolute; left: 0; right: 0; top: 10px; height: var(--alto-barra); border-radius: 99px;
  background: linear-gradient(#aeb9c8, #eef2f7 35%, #8e9bad 70%, #6f7d91);
  box-shadow: 0 3px 5px rgba(21, 34, 56, .2);
}
.prenda {
  position: relative; display: grid; justify-items: center; gap: .6rem; padding-bottom: .5rem;
  text-decoration: none; color: var(--tinta); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.prenda__dibujo {
  width: min(100%, 9.5rem); height: auto; overflow: visible; transform-origin: 50% 3%;
  filter: drop-shadow(0 10px 10px rgba(21, 34, 56, .18));
}
.prenda__percha { fill: none; stroke: #5d6d83; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.prenda__marcas { fill: none; stroke-width: 2.6; stroke-dasharray: 5 4; stroke-linecap: round; }
.prenda__nombre {
  font: 600 1.05rem/1.2 var(--display); padding: .35rem .8rem; border-radius: 4px; text-align: center; white-space: nowrap;
  outline: 2px dashed transparent; outline-offset: -5px; transition: background .25s, outline-color .25s;
}
.prenda:hover .prenda__dibujo { animation: vaiven 1.1s ease-in-out; }
.prenda:focus-visible { outline: none; }
.prenda:focus-visible .prenda__nombre { outline: 3px solid var(--hilo); outline-offset: 2px; }

/* Con JS funciona como pestañas: la prenda elegida se balancea y muestra sus marcas de tiza */
.perchero--js .prenda .prenda__marcas { clip-path: inset(-4px 100% -4px -4px); opacity: 0; transition: clip-path .9s cubic-bezier(.5, 0, .2, 1) .25s, opacity 0s .25s; }
.perchero--js .prenda[aria-selected='true'] .prenda__marcas { clip-path: inset(-4px -4px -4px -4px); opacity: 1; }
.perchero--js .prenda[aria-selected='false'] .prenda__tela { opacity: .7; transition: opacity .3s; }
.perchero--js .prenda[aria-selected='false']:hover .prenda__tela { opacity: 1; }
.perchero--js .prenda[aria-selected='true'] .prenda__nombre { background: var(--cinta); outline-color: rgba(21, 34, 56, .45); }
.perchero--js .prenda.balanceo .prenda__dibujo { animation: pendulo 1.6s cubic-bezier(.3, .6, .4, 1); }
@keyframes vaiven { 30% { transform: rotate(4deg); } 65% { transform: rotate(-3deg); } }
@keyframes pendulo { 12% { transform: rotate(-11deg); } 32% { transform: rotate(8deg); } 52% { transform: rotate(-5deg); } 72% { transform: rotate(2.5deg); } 88% { transform: rotate(-1deg); } }

/* Entrada: las perchas llegan deslizándose por la barra, una tras otra */
@supports (animation-timeline: view()) {
  .taller { view-timeline-name: --taller; }
  .prenda { animation: colgar cubic-bezier(.3, .8, .4, 1) both; animation-timeline: --taller; animation-range: cover calc(6% + var(--i) * 2.5%) cover calc(22% + var(--i) * 2.5%); }
}
@keyframes colgar { from { transform: translateX(calc(60vw - var(--i) * 6rem)) rotate(14deg); opacity: 0; } 20% { opacity: 1; } 75% { transform: translateX(-6px) rotate(-4deg); } }

/* Etiqueta con los arreglos de la prenda elegida */
.arreglos { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.arreglo {
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1rem 3rem;
  background: var(--tela); border-radius: 8px; padding: clamp(1.4rem, 3vw, 2.2rem);
  outline: 2px dashed var(--pespunte); outline-offset: -9px;
}
.arreglo[hidden] { display: none; }
.arreglo h3 { font-size: 1.6rem; }
.arreglo__cab p { color: var(--tinta-suave); }
.arreglo__lista { list-style: none; padding: 0; margin: 0; columns: 2 14rem; column-gap: 2rem; align-self: center; }
.arreglo__lista li { break-inside: avoid; position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.arreglo__lista li::before { /* botoncito */
  content: ''; position: absolute; left: 0; top: .3em; width: .95rem; height: .95rem; border-radius: 50%;
  background:
    radial-gradient(circle at 36% 36%, #fff 0 10%, transparent 11%), radial-gradient(circle at 64% 36%, #fff 0 10%, transparent 11%),
    radial-gradient(circle at 36% 64%, #fff 0 10%, transparent 11%), radial-gradient(circle at 64% 64%, #fff 0 10%, transparent 11%),
    var(--marca);
}
.perchero--js + .arreglos .arreglo:not([hidden]) { animation: abrir-etiqueta .55s cubic-bezier(.3, 1.2, .5, 1); transform-origin: 50% 0; }
.perchero--js + .arreglos .arreglo:not([hidden]) li { animation: aparecer-paso .4s ease-out both; animation-delay: calc(.15s + var(--j, 0) * 50ms); }
@keyframes abrir-etiqueta { from { clip-path: inset(0 0 100% 0 round 8px); transform: translateY(-8px); } to { clip-path: inset(0 0 0 0 round 8px); } }
.taller__todo { margin-top: 2.25rem; }

@media (max-width: 760px) {
  /* el perchero se desliza con el dedo */
  .perchero { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; }
  .perchero::-webkit-scrollbar { display: none; }
  .perchero::before { width: calc(var(--n) * 9.5rem + var(--gutter) * 2); right: auto; }
  .prenda { flex: 0 0 9rem; scroll-snap-align: center; }
  .arreglo { grid-template-columns: 1fr; }
}

.servicio-detalle { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1rem 3rem; padding-block: 2.5rem; border-top: 2px dashed var(--pespunte); }
.servicio-detalle:last-of-type { border-bottom: 2px dashed var(--pespunte); }
.servicio-detalle h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.servicio-detalle ul { padding-left: 1.1rem; columns: 2 16rem; column-gap: 2.5rem; }
.servicio-detalle li { break-inside: avoid; margin-bottom: .4rem; }
@media (max-width: 760px) { .servicio-detalle { grid-template-columns: 1fr; } }

/* Dos columnas genéricas */
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) {
  .dos, .hero__rejilla { grid-template-columns: 1fr; }
  .hero__visual { width: min(62%, 15rem); justify-self: end; margin-top: -1rem; margin-bottom: -3.5rem; }
}

.cita { font: 600 clamp(1.4rem, 2.6vw, 1.9rem)/1.3 var(--display); letter-spacing: -.01em; margin: 0 0 1rem; max-width: 30ch; }
.dato { font: 800 clamp(3.5rem, 9vw, 6rem)/.9 var(--display); letter-spacing: -.04em; color: var(--hilo); margin: 0; }
.dato__texto { font: 600 1.2rem/1.3 var(--display); margin: .5rem 0 1.5rem; }
.medida { position: relative; width: min(100%, 20rem); height: 3.4rem; overflow: hidden; border-radius: 3px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.medida::after { /* marca fija en el centro: lo que se lee es la medida */
  content: ''; position: absolute; left: 50%; top: 0; height: 1.75rem; width: 3px; margin-left: -1.5px; background: var(--hilo); z-index: 1;
}
.medida::before { /* punta de la aguja */
  content: ''; position: absolute; left: 50%; top: 0; margin-left: -6px; z-index: 1;
  border: 6px solid transparent; border-top: 7px solid var(--hilo); border-bottom: 0;
}
.medida__cinta {
  --paso: 40px;
  position: absolute; top: .6rem; bottom: 0; left: 50%; width: calc(var(--paso) * 31);
  background:
    repeating-linear-gradient(90deg, var(--tinta) 0 1.5px, transparent 1.5px var(--paso)) top left / 100% 40% no-repeat,
    repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px calc(var(--paso) / 5)) top left / 100% 20% no-repeat,
    var(--cinta);
  transform: translateX(calc(var(--paso) * -20));
}
.medida__cinta span { position: absolute; left: calc(var(--paso) * var(--n)); bottom: .25rem; transform: translateX(-50%); font: 800 .9rem/1 var(--display); }
.medida__cinta span:first-child { transform: none; }
.medida__cinta span:nth-child(21) { color: var(--hilo); font-size: 1.05rem; }
@supports (animation-timeline: view()) {
  .medida__cinta { animation: medir cubic-bezier(.2, .7, .3, 1) both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
}
@keyframes medir { from { transform: translateX(0); } }

/* Sobre Didal: línea de tiempo cosida con scroll */
.linea { list-style: none; padding: 0 0 0 3.5rem; margin: 2rem 0 0; position: relative; max-width: 44rem; }
.linea::before { /* el hilo */
  content: ''; position: absolute; left: calc(1.1rem - 1.5px); top: .6rem; bottom: .6rem; border-left: 3px dashed var(--hilo);
}
.linea li { position: relative; padding-bottom: 2.25rem; }
.linea li:last-child { padding-bottom: 0; }
.linea li::before { /* cada hito es un botón cosido al hilo */
  content: ''; position: absolute; left: -3.5rem; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background:
    radial-gradient(circle at 36% 36%, var(--blanco) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 36%, var(--blanco) 0 9%, transparent 10%),
    radial-gradient(circle at 36% 64%, var(--blanco) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 64%, var(--blanco) 0 9%, transparent 10%),
    var(--marca);
  box-shadow: inset 0 0 0 3px var(--marca-profundo), 0 0 0 5px var(--blanco);
}
.linea__ano { font: 800 1.5rem/1.2 var(--display); margin: 0 0 .25rem; color: var(--tinta); }
.linea li p:last-child { color: var(--tinta-suave); margin: 0; }
@supports (animation-timeline: view()) {
  .linea::before { animation: coser-linea linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  .linea li::before { animation: coser-boton cubic-bezier(.3, 1.5, .5, 1) both; animation-timeline: view(); animation-range: entry 60% cover 40%; }
  .linea li > * { animation: aparecer linear both; animation-timeline: view(); animation-range: entry 70% cover 40%; }
}
@keyframes coser-linea { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes coser-boton { from { transform: scale(0) rotate(-200deg); } }
@keyframes aparecer { from { opacity: 0; transform: translateX(-.75rem); } }

/* Galería */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .75rem; list-style: none; padding: 0; margin: 0; }
.galeria img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: var(--radio); }

/* FAQ */
.faq { max-width: 52rem; border-top: 2px dashed var(--pespunte); }
.faq details { border-bottom: 2px dashed var(--pespunte); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
  font: 600 1.2rem/1.3 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .1rem; top: 50%; width: 1.9rem; height: 1.9rem; margin-top: -.95rem; border-radius: 50%;
  /* botón azul con una puntada en cruz: "+" cerrado, "×" abierto */
  background:
    linear-gradient(var(--cinta), var(--cinta)) center / 55% 3px no-repeat,
    linear-gradient(var(--cinta), var(--cinta)) center / 3px 55% no-repeat,
    var(--marca);
  box-shadow: inset 0 0 0 3px var(--marca-profundo);
  transition: transform .45s cubic-bezier(.3, 1.5, .5, 1);
}
.faq summary:hover::after { transform: rotate(20deg); }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height .4s cubic-bezier(.3, .7, .3, 1), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq .respuesta { padding: 0 0 1.25rem; max-width: var(--medida); color: var(--tinta-suave); }

/* Migas */
.migas { font-size: .9rem; padding-top: 1.5rem; margin-top: -1px; } /* sin costura visible con la cabecera */
.migas ol { width: fit-content; padding: .3rem .8rem !important; border-radius: 999px; background: rgba(16, 40, 74, .38); } /* fondo más oscuro: texto pequeño con contraste AA */
.migas a { color: var(--blanco); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.migas li + li::before { content: '/'; margin-right: .4rem; color: #b9cde6; }

.cabecera-pagina { padding-top: 1.5rem; padding-bottom: clamp(2.75rem, 6vw, 4.25rem); }
.cabecera-pagina .entradilla { max-width: 40ch; }
.legal { padding-block: clamp(2.5rem, 6vw, 4rem) 5rem; }
.legal h2 { font-size: 1.35rem; }
.legal__revision { margin-top: 2.5rem; color: var(--tinta-suave); font-size: .95rem; }
.cabecera-pagina h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); max-width: 18ch; }

/* Llamada final */
.llamada { position: relative; }
.llamada h2 { color: var(--blanco); max-width: 20ch; }
.llamada p { max-width: 40ch; }
.llamada__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Pie */
.pie { background: var(--azul-noche); color: #c9d8ec; font-size: .95rem; padding-block: 3.5rem 2rem; }
.pie a { color: var(--blanco); }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 2rem; }
.pie h2 { font-size: 1.05rem; color: var(--blanco); margin-bottom: .75rem; letter-spacing: 0; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .45rem; }
.pie address { font-style: normal; margin-bottom: 1rem; }
.pie .marca { margin-bottom: 1rem; }
.pie .logo { height: 3.25rem; }
.pie__legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px dashed #3f628f; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
@media (max-width: 860px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; } }

/* Contacto: fichas + mapa ilustrado */
.contacto { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.contacto__tiendas { display: grid; gap: 1.5rem; }
.contacto__mapa { position: sticky; top: 1.25rem; }
@media (max-width: 900px) {
  .contacto { grid-template-columns: 1fr; }
  .contacto__mapa { position: static; order: -1; }
}

.mapa { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #fbfcfe;
  box-shadow: 0 0 0 1px #d6e0ec, 0 18px 40px -24px rgba(21, 34, 56, .45); }
.mapa__svg { display: block; width: 100%; height: auto; }
.mapa__calles { fill: none; stroke: #d7e1ee; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mapa__medias { fill: none; stroke: #c3d3e7; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.mapa__avenidas-borde { fill: none; stroke: #b3c7df; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.mapa__avenidas { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mapa__tren { fill: none; stroke: #7d8ca3; stroke-width: 2.2; stroke-dasharray: 7 6; }
.mapa__nombre { font-family: var(--texto); font-weight: 600; fill: #6d7c93; paint-order: stroke; stroke: #fbfcfe; stroke-width: 4px; letter-spacing: .02em; }
.mapa__hilo { fill: none; stroke: #e9b21f; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 10; }
.mapa__hilo-trazo { fill: none; stroke: #fff; stroke-width: 14; }

/* Marcadores: botones del logo con etiqueta de ropa */
.mapa__pin { position: absolute; width: 0; height: 0; text-decoration: none; color: var(--tinta); z-index: 1; }
.mapa__boton {
  position: absolute; left: -1.4rem; top: -1.4rem; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background:
    radial-gradient(circle at 37% 37%, #fff 0 8%, transparent 9%),
    radial-gradient(circle at 63% 37%, #fff 0 8%, transparent 9%),
    radial-gradient(circle at 37% 63%, #fff 0 8%, transparent 9%),
    radial-gradient(circle at 63% 63%, #fff 0 8%, transparent 9%),
    var(--marca);
  box-shadow: inset 0 0 0 3px var(--marca-profundo), 0 0 0 4px #fff, 0 8px 14px rgba(21, 34, 56, .3);
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.mapa__etiqueta {
  position: absolute; left: 1.9rem; top: -1.25rem; white-space: nowrap;
  display: grid; padding: .45rem .75rem .5rem; background: #fff; border-radius: 5px;
  outline: 2px dashed var(--pespunte); outline-offset: -5px;
  box-shadow: 0 6px 14px -6px rgba(21, 34, 56, .35);
  transform-origin: -1rem 50%; transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.mapa__etiqueta::before { /* cordón que une la etiqueta al botón */
  content: ''; position: absolute; right: 100%; top: 50%; width: .6rem; border-top: 2px solid var(--tinta-suave);
}
.mapa__etiqueta strong { font: 600 .95rem/1.2 var(--display); }
.mapa__etiqueta small { font-size: .78rem; font-weight: 600; color: var(--hilo); text-decoration: underline; text-underline-offset: .15em; }
.mapa__pin[data-tienda="cc-las-americas"] .mapa__etiqueta { left: auto; right: 1.9rem; transform-origin: calc(100% + 1rem) 50%; }
.mapa__pin[data-tienda="cc-las-americas"] .mapa__etiqueta::before { right: auto; left: 100%; }
.mapa__pin:hover .mapa__boton, .mapa__pin:focus-visible .mapa__boton, .mapa__pin.activo .mapa__boton { transform: translateY(-4px) rotate(90deg) scale(1.08); }
.mapa__pin:hover .mapa__etiqueta, .mapa__pin:focus-visible .mapa__etiqueta, .mapa__pin.activo .mapa__etiqueta { transform: rotate(-4deg); }
.mapa__pin[data-tienda="cc-las-americas"]:hover .mapa__etiqueta, .mapa__pin[data-tienda="cc-las-americas"].activo .mapa__etiqueta { transform: rotate(4deg); }
.mapa__pin:focus-visible { outline: none; }
.mapa__pin:focus-visible .mapa__boton { outline: 3px solid var(--hilo); outline-offset: 5px; }

.mapa__creditos { position: absolute; right: .5rem; bottom: .4rem; font-size: .7rem; color: var(--tinta-suave); background: rgba(255, 255, 255, .85); padding: .1rem .4rem; border-radius: 3px; }
.mapa__creditos a { color: inherit; }

/* Revelado (solo con JS; sin JS el mapa se ve completo) */
.js .mapa .mapa__base { clip-path: circle(0% at var(--centro)); transition: clip-path 1.6s cubic-bezier(.5, 0, .2, 1); }
.js .mapa .mapa__boton { transform: scale(0) rotate(-200deg); }
.js .mapa .mapa__etiqueta { opacity: 0; transform: rotate(-12deg) translateX(-6px); }
.js .mapa .mapa__hilo-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .mapa.visible .mapa__base { clip-path: circle(75% at var(--centro)); }
.js .mapa.visible .mapa__boton { transform: none; transition-delay: calc(.7s + var(--i) * .25s); }
.js .mapa.visible .mapa__etiqueta { opacity: 1; transform: none; transition: opacity .3s calc(1.3s + var(--i) * .2s), transform .5s cubic-bezier(.3, 1.5, .5, 1) calc(1.3s + var(--i) * .2s); }
.js .mapa.visible .mapa__hilo-trazo { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.5, 0, .3, 1) 1.1s; }
/* terminada la entrada, la interacción responde sin retrasos */
.js .mapa.listo .mapa__boton, .js .mapa.listo .mapa__etiqueta { transition-delay: 0s; }

/* Botón con forma de etiqueta colgante de ropa */
.seccion--tela { --fondo: var(--tela); }
.etiqueta-boton {
  position: relative; display: inline-flex; margin-left: 1.8rem; text-decoration: none; color: var(--blanco);
  transform-origin: 1.35rem 50%; transition: transform .6s cubic-bezier(.3, 1.8, .5, 1);
}
.etiqueta-boton__cuerpo {
  position: relative; display: block; padding: .85rem 1.5rem .85rem 2.6rem;
  font: 700 1.17rem/1.2 var(--texto); background: var(--marca);
  clip-path: polygon(1.1rem 0, 100% 0, 100% 100%, 1.1rem 100%, 0 50%);
  filter: drop-shadow(0 6px 8px rgba(12, 32, 62, .25)); transition: background .25s;
}
.etiqueta-boton__cuerpo::before { /* ojal */
  content: ''; position: absolute; left: 1rem; top: 50%; width: .75rem; height: .75rem; margin-top: -.375rem; border-radius: 50%;
  background: var(--fondo, var(--blanco)); box-shadow: 0 0 0 2.5px var(--blanco), inset 0 1px 2px rgba(0, 0, 0, .25);
}
.etiqueta-boton__cuerpo::after { /* pespunte */
  content: ''; position: absolute; inset: .3rem .35rem .3rem 2.1rem; border: 2px dashed rgba(255, 255, 255, .7); border-radius: 2px;
}
.etiqueta-boton__cordon {
  position: absolute; right: calc(100% - 1.4rem); top: calc(50% - 1.25rem); width: 2.5rem; height: 2.5rem; overflow: visible; z-index: 1;
  fill: none; stroke: var(--cinta); stroke-width: 3.5; stroke-linecap: round;
}
.etiqueta-boton:hover { transform: rotate(-5deg); color: var(--blanco); }
.etiqueta-boton:hover .etiqueta-boton__cuerpo { background: var(--marca-profundo); }
.etiqueta-boton:focus-visible { outline: none; }
.etiqueta-boton:focus-visible .etiqueta-boton__cuerpo { background: var(--marca-profundo); }
.etiqueta-boton:focus-visible .etiqueta-boton__cuerpo::after { border: 3px solid var(--cinta); }
@supports (animation-timeline: view()) {
  .etiqueta-boton { animation: colgar-etiqueta linear both; animation-timeline: view(); animation-range: entry 70% cover 40%; }
}
@keyframes colgar-etiqueta { from { rotate: -32deg; opacity: 0; } 15% { opacity: 1; } 40% { rotate: 14deg; } 62% { rotate: -7deg; } 82% { rotate: 3deg; } to { rotate: 0deg; } }

/* "+20": un parche azul cosido sobre la tela */
@property --costura { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.parche {
  position: relative; background: var(--marca); color: var(--blanco); border-radius: 12px; rotate: -1.5deg;
  padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: 0 18px 30px -18px rgba(12, 32, 62, .6);
  view-timeline-name: --parche;
}
.parche::after {
  content: ''; position: absolute; inset: .6rem; border: 2.5px dashed rgba(255, 255, 255, .8); border-radius: 8px; pointer-events: none;
  mask: conic-gradient(from 0deg, #000 var(--costura), transparent 0);
}
.parche .dato { color: var(--blanco); }
.parche .dato__texto { font: 800 1.25rem/1.3 var(--display); }
.parche .medida::before { border-top-color: var(--blanco); }
.parche .medida::after { background: var(--tinta); }
.historia__accion { margin-top: 1.75rem; }
@supports (animation-timeline: view()) {
  .parche { animation: aterrizar cubic-bezier(.3, 1.4, .5, 1) both; animation-timeline: --parche; animation-range: entry 5% cover 30%; }
  .parche::after { animation: coser-parche linear both; animation-timeline: --parche; animation-range: cover 22% cover 45%; }
  .parche .medida__cinta { animation-timeline: --parche; animation-range: cover 35% cover 58%; }
  .historia .dos > div:last-child > :not(.historia__accion) { animation: aparecer-paso linear both; animation-timeline: view(); animation-range: entry 20% cover 30%; }
}
@keyframes aterrizar { from { translate: 0 -3rem; rotate: -16deg; scale: 1.12; opacity: 0; } 35% { opacity: 1; } }
@keyframes coser-parche { from { --costura: 0deg; } to { --costura: 360deg; } }

/* Etiqueta de composición cosida bajo el parche: las cifras de Didal */
.historia__datos { display: grid; justify-items: center; }
.historia__datos .parche { justify-self: stretch; z-index: 1; }
.cuidado {
  width: min(86%, 21rem); margin-top: -1.1rem; padding: 2.7rem 1.5rem 2.2rem; rotate: 1.2deg; transform-origin: 50% 0;
  color: var(--tinta);
  background:
    repeating-linear-gradient(0deg, rgba(21, 34, 56, .035) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #f4f5f1, #ffffff 45%, #f1f2ee);
  box-shadow: 0 10px 18px -12px rgba(12, 32, 62, .45);
  /* borde inferior cortado con tijeras dentadas */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 96% 100%, 92% calc(100% - 8px), 88% 100%, 84% calc(100% - 8px), 80% 100%, 76% calc(100% - 8px), 72% 100%, 68% calc(100% - 8px), 64% 100%, 60% calc(100% - 8px), 56% 100%, 52% calc(100% - 8px), 48% 100%, 44% calc(100% - 8px), 40% 100%, 36% calc(100% - 8px), 32% 100%, 28% calc(100% - 8px), 24% 100%, 20% calc(100% - 8px), 16% 100%, 12% calc(100% - 8px), 8% 100%, 4% calc(100% - 8px), 0 100%);
  position: relative;
}
.cuidado::before { /* costura que la une al parche */
  content: ''; position: absolute; left: .6rem; right: .6rem; top: 1.8rem; border-top: 2px dashed var(--pespunte);
}
.cuidado__titulo { font: 600 .95rem/1.3 var(--texto); color: var(--tinta-suave); text-align: center; margin: 0 0 1rem; }
.cuidado__datos { display: grid; gap: .9rem; margin: 0; text-align: center; }
.cuidado__datos > div { display: flex; flex-direction: column-reverse; }
.cuidado__datos dd { margin: 0; font: 800 clamp(2rem, 7vw, 2.5rem)/1 var(--display); letter-spacing: -.03em; color: var(--hilo); }
.cuidado__datos dt { font-size: 1rem; color: var(--tinta-suave); margin-top: .2rem; }
.cuidado__datos > div + div { padding-top: .9rem; border-top: 1px solid rgba(21, 34, 56, .12); }
.cuidado__simbolos { display: block; width: 9.5rem; margin: 1.3rem auto 0; color: var(--tinta-suave); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.cuidado__simbolos text { font: 700 8px var(--texto); fill: currentColor; stroke: none; text-anchor: middle; }
@supports (animation-timeline: view()) {
  .cuidado { animation: desenrollar-etiqueta linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  .cuidado__datos > div, .cuidado__titulo, .cuidado__simbolos { animation: aparecer-paso linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
}
@keyframes desenrollar-etiqueta { from { translate: 0 -2.5rem; scale: 1 .15; opacity: 0; } 30% { opacity: 1; } }

/* Instagram: tendedero del taller */
.instagram__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.instagram__cabecera .seccion__cabecera { margin-bottom: 0; }
.instagram__cabecera .etiqueta-boton { margin-bottom: .4rem; }
.tendedero { position: relative; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 1.5rem; overflow-x: auto; scrollbar-width: none; }
.tendedero::-webkit-scrollbar { display: none; }
.tendedero__hilo {
  position: absolute; left: 0; top: 0; width: calc(var(--n) * 13.5rem - 1rem + var(--gutter) * 2); height: 60px; overflow: visible;
  fill: none; stroke: #e9b21f; stroke-width: 3; stroke-linecap: round;
}
.tendedero__hilo path { vector-effect: non-scaling-stroke; }
.tendedero__fotos {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 12.5rem); gap: 1rem;
  width: max-content;
}
@media (min-width: 900px) { .tendedero__fotos { width: auto; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } .tendedero__hilo { width: 100%; } .tendedero { overflow: visible; } }
.tendedero__fotos li { padding-top: calc(var(--caida) - 6px); }
.foto {
  position: relative; display: block; padding: .6rem .6rem 2.2rem; background: var(--blanco); border-radius: 3px;
  box-shadow: 0 14px 22px -14px rgba(12, 32, 62, .55), 0 0 0 1px rgba(21, 34, 56, .06);
  rotate: calc((var(--i) - 2) * 1.6deg); transform-origin: 50% 0; text-decoration: none;
}
.foto:hover, .foto:focus-visible { animation: vaiven 1.1s ease-in-out; }
.foto:focus-visible { outline: 3px solid var(--hilo); outline-offset: 4px; }
.foto__pinza { position: absolute; left: 50%; top: -1.1rem; width: .95rem; height: auto; translate: -50% 0; z-index: 1; filter: drop-shadow(0 2px 2px rgba(21, 34, 56, .3)); }
.foto__imagen { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: var(--tela); }
.foto__video { /* reel: botón de reproducir */
  position: absolute; right: 1.1rem; top: 1.1rem; width: 2rem; height: 2rem; border-radius: 50%; z-index: 1;
  background: rgba(21, 34, 56, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.foto__video::after { content: ''; position: absolute; left: 55%; top: 50%; translate: -50% -50%; border: .45rem solid transparent; border-left: .7rem solid #fff; border-right: 0; }
.foto__imagen--ilustrada { display: grid; place-items: center; background:
  repeating-linear-gradient(45deg, rgba(75, 126, 176, .07) 0 6px, transparent 6px 12px), var(--tela); }
.foto__imagen--ilustrada svg { width: 62%; height: auto; filter: drop-shadow(0 8px 8px rgba(21, 34, 56, .18)); }
@supports (animation-timeline: view()) {
  .instagram { view-timeline-name: --instagram; }
  .tendedero__hilo path { animation: dibujar linear both; animation-timeline: --instagram; animation-range: entry 30% cover 40%; stroke-dasharray: 1; }
  .foto { animation: colgar-foto linear both; animation-timeline: --instagram; animation-range: cover calc(25% + var(--i) * 3%) cover calc(45% + var(--i) * 3%); }
  .foto:hover, .foto:focus-visible { animation: vaiven 1.1s ease-in-out; }
}
@keyframes colgar-foto { from { translate: 0 -3rem; rotate: -18deg; opacity: 0; } 20% { opacity: 1; } 55% { rotate: 7deg; } 80% { rotate: -3deg; } }

/* Plan B para navegadores sin animaciones ligadas al scroll (Firefox, Safari < 26):
   cada sección se anima como secuencia cuando aparece en pantalla (js/didal.js le añade .visto).
   Sin JS no se aplica nada y todo se ve en su estado final. */
@supports not (animation-timeline: view()) {
  .pasos li:nth-child(2), .linea li:nth-child(2) { --k: 1; }
  .pasos li:nth-child(3), .linea li:nth-child(3) { --k: 2; }
  .pasos li:nth-child(4), .linea li:nth-child(4) { --k: 3; }

  /* Cómo trabajamos */
  .js .pasos::after { animation: pespunte 2.6s linear .2s both paused; }
  .js .pasos__num { animation: boton-cosido .7s cubic-bezier(.3, 1.2, .5, 1) both paused; animation-delay: calc(.25s + var(--k, 0) * .65s); }
  .js .pasos__icono * { animation: dibujar .8s linear both paused; animation-delay: calc(.4s + var(--k, 0) * .65s); }
  .js .pasos li > :is(h3, p) { animation: aparecer-paso .6s ease-out both paused; animation-delay: calc(.5s + var(--k, 0) * .65s); }
  @media (min-width: 901px) {
    .js .aguja { display: block; left: 100%; animation: aguja-avanza 2.6s linear .2s both paused; }
    .js .aguja svg { animation: puntada 2.6s linear .2s both paused; }
  }
  @media (max-width: 900px) { .js .pasos::after { animation-name: pespunte-v; } }

  /* Qué arreglamos: las perchas llegan por la barra */
  .js .prenda { animation: colgar 1s cubic-bezier(.3, .8, .4, 1) both paused; animation-delay: calc(var(--i) * .12s); }

  /* Una tienda de barrio: parche, pespunte, cinta, etiqueta de composición y texto */
  .js .parche { animation: aterrizar .9s cubic-bezier(.3, 1.4, .5, 1) both paused; }
  .js .parche::after { animation: coser-parche 1.2s linear .7s both paused; }
  .js .medida__cinta { animation: medir 1.4s cubic-bezier(.2, .7, .3, 1) 1s both paused; }
  .js .cuidado { animation: desenrollar-etiqueta .9s ease-out 1.2s both paused; }
  .js :is(.cuidado__titulo, .cuidado__datos > div, .cuidado__simbolos) { animation: aparecer-paso .5s ease-out 1.7s both paused; }
  .js .historia .dos > div:last-child > :not(.historia__accion) { animation: aparecer-paso .6s ease-out .3s both paused; }
  .js .etiqueta-boton { animation: colgar-etiqueta 1.3s ease-out .8s both paused; }

  /* Instagram: se tiende el hilo y caen las fotos */
  .js .tendedero__hilo path { stroke-dasharray: 1; animation: dibujar 1.2s linear both paused; }
  .js .foto { animation: colgar-foto 1.1s ease-out both paused; animation-delay: calc(.5s + var(--i) * .15s); }

  /* Sobre Didal: línea de tiempo */
  .js .linea::before { animation: coser-linea 2s linear both paused; }
  .js .linea li::before { animation: coser-boton .7s cubic-bezier(.3, 1.5, .5, 1) both paused; animation-delay: calc(.2s + var(--k, 0) * .5s); }
  .js .linea li > * { animation: aparecer .6s ease-out both paused; animation-delay: calc(.35s + var(--k, 0) * .5s); }

  .visto, .visto *, .visto *::before, .visto *::after { animation-play-state: running !important; }
}

/* Transición entre páginas: la cabecera se queda y el contenido nuevo entra cortado de izquierda a derecha, como tela */
@view-transition { navigation: auto; }
.cabecera { view-transition-name: cabecera; }
main { view-transition-name: contenido; }
::view-transition-old(contenido) { animation: .2s ease-in both salir; }
::view-transition-new(contenido) { animation: .55s .1s cubic-bezier(.6, 0, .2, 1) both cortar; }
@keyframes salir { to { opacity: 0; transform: translateY(-8px); } }
@keyframes cortar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .faq details::details-content { transition: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hilo { stroke-dashoffset: 0; }
}
@media print {
  .cabecera nav, .cinta, .llamada, .pie__rejilla > :not(:first-child) { display: none; }
}
.tienda--mini { padding: 1.2rem 1.4rem; }
.tienda__nombre { font: 600 1.15rem/1.2 var(--display); margin: 0 0 .25rem; }
.tienda__dir { margin: 0 0 .5rem; color: var(--tinta-suave); }