/* =====================================================================
   T-STAGE · ESTILOS
   Monocromo editorial: blanco, gris de estudio y negro. Esquinas rectas,
   bordes finos y mucho aire. Una sola tipografía (Archivo) que se ensancha
   en los titulares.
   Índice: 1 base · 2 piezas · 3 cabecera y menú · 4 portada · 5 producto
   (tarjetas, rejilla, filtros) · 6 bloques de portada · 7 ficha · 8 cesta
   y pedido · 9 páginas de texto · 10 pie · 11 animaciones
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --blanco: #ffffff;
  --gris: #f4f4f2;          /* fondo de bloque */
  --estudio: #e9e9e6;       /* fondo de foto */
  --linea: #d6d6d2;         /* bordes finos */
  --tinta: #111111;
  --suave: #5b5b58;         /* texto secundario (7:1 sobre blanco) */
  --aviso: #8a1c1c;         /* errores de formulario */

  --letra: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ancho: 1360px;
  --margen: clamp(16px, 4vw, 48px);
  --seccion: clamp(64px, 10vw, 128px);
  --cab: 60px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --rapido: 200ms;

  color-scheme: light;
}
@media (min-width: 1024px) { :root { --cab: 72px; } }

/* ---------------------------------------------------------------- 1 BASE */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;               /* nunca scroll lateral */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cab) + 16px);
}
body {
  overflow-x: clip;
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 15px;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.sin-scroll { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
::selection { background: var(--tinta); color: var(--blanco); }
[hidden] { display: none !important; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--blanco); padding: 10px 16px;
  font-size: 13px; text-decoration: none;
}
.saltar:focus { top: 12px; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}
.seccion { padding-block: var(--seccion); }
.seccion--gris { background: var(--gris); }
.seccion--compacta { padding-block: clamp(40px, 6vw, 72px) var(--seccion); }
.centro { text-align: center; }
.nw { white-space: nowrap; }

/* ------------------------------------------------------------ 2 PIEZAS */
.titular-xl, .titular-l, .titular-m {
  font-stretch: 125%;
  font-weight: 760;
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: -.012em;
}
.titular-xl { font-size: clamp(2.05rem, 9.4vw, 6.6rem); }
.titular-l  { font-size: clamp(1.75rem, 6vw, 4.25rem); }
.titular-m  { font-size: clamp(1.15rem, 2.4vw, 1.75rem); line-height: 1.05; }

.rotulo {
  font-size: .7rem;
  font-weight: 560;
  font-stretch: 115%;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.texto-suave { color: var(--suave); }
.entradilla { max-width: 46ch; color: var(--suave); font-size: 15px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--blanco);
  font-size: .72rem;
  font-weight: 620;
  font-stretch: 118%;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.boton:hover { background: var(--blanco); color: var(--tinta); }
.boton--borde { background: transparent; color: var(--tinta); }
.boton--borde:hover { background: var(--tinta); color: var(--blanco); }
.boton--ancho { width: 100%; }
.boton[disabled], .boton[aria-disabled="true"] {
  background: var(--estudio); border-color: var(--estudio); color: var(--suave); cursor: not-allowed;
}
.boton .flecha { transition: transform var(--rapido) var(--curva); }
.boton:hover .flecha { transform: translateX(4px); }

button.enlace { border: 0; background: none; padding: 0; min-height: 44px; cursor: pointer; }
.enlace {
  font-size: .72rem; font-weight: 600; font-stretch: 115%;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px;
}

.pastilla {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid #3a3a38;
  background: transparent;
  color: var(--tinta);
  font-size: .68rem;
  font-weight: 560;
  font-stretch: 115%;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 0;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.pastilla:hover { background: var(--gris); }
.pastilla[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }

.etiqueta {
  display: inline-block;
  padding: 5px 8px;
  background: var(--blanco);
  color: var(--tinta);
  font-size: .6rem;
  font-weight: 650;
  font-stretch: 115%;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}
/* el borde fino hace que se lea también sobre las fotos de fondo blanco */
.etiqueta { box-shadow: inset 0 0 0 1px var(--tinta); }
.etiqueta--negra { background: var(--tinta); color: var(--blanco); }
.etiqueta--borde { background: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px var(--linea); color: var(--suave); }

/* ------------------------------------------------- 3 CABECERA Y MENÚ */
.franja {
  background: var(--tinta);
  color: var(--blanco);
  text-align: center;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-stretch: 112%;
  padding: 9px var(--margen);
  line-height: 1.5;
}
.franja a { color: inherit; }
.franja__mas { display: none; }
@media (min-width: 640px) { .franja__mas { display: inline; } }

.cab {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent;
  transition: border-color var(--rapido) var(--curva);
}
@supports (backdrop-filter: blur(8px)) {
  .cab { background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
.cab.con-borde { border-bottom-color: var(--linea); }
.cab__dentro {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--cab);
}
.cab__nav { display: none; }
.cab__nav ul { display: flex; gap: clamp(20px, 4vw, 64px); list-style: none; margin: 0; padding: 0; }
.cab__nav a {
  font-size: .7rem; font-weight: 560; font-stretch: 115%;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-block: 4px;
  transition: background-size var(--rapido) var(--curva);
}
.cab__nav a:hover, .cab__nav a[aria-current="page"] { background-size: 100% 1px; }
.cab__logo { justify-self: center; display: block; padding: 6px; }
.cab__logo img { width: 40px; height: 40px; }
.cab__dcha { justify-self: end; display: flex; align-items: center; gap: clamp(20px, 4vw, 64px); }
.cab__izq { justify-self: start; display: flex; align-items: center; }

.cab__menu, .cab__cesta {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px;
  padding: 0 4px;
  border: 0; background: none;
  font-size: .7rem; font-weight: 560; font-stretch: 115%;
  letter-spacing: .16em; text-transform: uppercase;
}
.cab__menu-rayas { position: relative; width: 22px; height: 10px; }
.cab__menu-rayas::before, .cab__menu-rayas::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
}
.cab__menu-rayas::before { top: 0; }
.cab__menu-rayas::after { bottom: 0; }
.cab__cesta { position: relative; }
.cab__cesta svg { width: 22px; height: 22px; }
.cab__cesta-num {
  position: absolute; top: 4px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--blanco);
  font-size: .62rem; letter-spacing: 0; font-weight: 700; font-stretch: 100%;
  border-radius: 999px;
  transition: transform 300ms var(--curva);
}
.cab__cesta-num.salta { transform: scale(1.3); }
.cab__cesta-texto { display: none; }

@media (min-width: 1024px) {
  .cab__nav { display: block; }
  .cab__menu { display: none; }
  .cab__logo img { width: 48px; height: 48px; }
  .cab__cesta-texto { display: inline; }
  .cab__cesta-num { position: static; }
}

/* Menú del móvil: pantalla completa, entra desde arriba (nunca de lado) */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--blanco);
  display: flex; flex-direction: column;
  padding: 0 var(--margen) 32px;
  overflow-y: auto;
  opacity: 0; transform: translateY(-12px);
  transition: opacity 260ms var(--curva), transform 260ms var(--curva);
}
.menu.abierto { opacity: 1; transform: none; }
.menu__cab { display: flex; align-items: center; justify-content: space-between; height: var(--cab); flex: 0 0 auto; }
.menu__cerrar {
  min-width: 44px; min-height: 44px; border: 0; background: none;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-stretch: 115%; font-weight: 560;
}
.menu__lista { margin-top: 24px; display: grid; gap: 4px; }
.menu__lista a {
  display: block; padding: 10px 0;
  font-size: clamp(1.6rem, 9vw, 2.6rem); font-weight: 760; font-stretch: 125%;
  text-transform: uppercase; text-decoration: none; line-height: 1.05;
  border-bottom: 1px solid var(--linea);
}
.menu__pie { margin-top: auto; padding-top: 32px; display: grid; gap: 8px; color: var(--suave); font-size: 14px; }
.menu__pie a { color: var(--tinta); }

/* ---------------------------------------------------------- 4 PORTADA */
.portada { position: relative; isolation: isolate; background: var(--blanco); padding-block: clamp(24px, 5vw, 56px) clamp(56px, 8vw, 104px); }
.portada__rejilla { display: grid; gap: 28px; }
.portada__texto { display: grid; gap: 18px; align-content: center; }
.portada__titulo {
  position: relative; z-index: 3;
  color: var(--blanco);
  mix-blend-mode: difference;           /* negro sobre blanco, claro sobre la foto */
  font-size: clamp(2.05rem, 10.4vw, 7rem);
}
.portada__frase { max-width: 36ch; color: var(--suave); font-size: 15px; }
.portada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
@media (max-width: 559px) { .portada__secundario { display: none; } }

.collage { position: relative; height: clamp(300px, 92vw, 470px); }
.collage__foto {
  position: absolute;
  width: 58%;
  aspect-ratio: 3 / 4;
  background: var(--estudio);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
}
.collage__foto img { width: 100%; height: 100%; object-fit: cover; }
.collage__foto--a { left: 3%; top: 2%; transform: rotate(-5deg); z-index: 2; }
.collage__foto--b { right: 3%; top: 14%; transform: rotate(6deg); z-index: 1; }

@media (min-width: 900px) {
  .portada__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 0; }
  .portada__texto { grid-column: 1 / 10; grid-row: 1; align-self: center; }
  .portada__frase, .portada__botones { max-width: 34ch; }
  .portada__botones { max-width: none; }
  .collage { grid-column: 6 / 13; grid-row: 1; height: clamp(520px, 52vw, 680px); }
  .collage__foto { width: 50%; }
  .collage__foto--a { left: 4%; top: 4%; }
  .collage__foto--b { right: 2%; top: 16%; }
  .portada__titulo { font-size: clamp(3.2rem, 6.7vw, 6rem); }
}

/* ------------------------------------- 5 TARJETAS, REJILLA Y FILTROS */
.cabecera-bloque { display: grid; justify-items: center; gap: 22px; margin-bottom: clamp(28px, 4vw, 48px); text-align: center; }

.filtros {
  display: flex; gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--margen) * -1);
  padding: 2px var(--margen) 4px;
  max-width: calc(100% + var(--margen) * 2);
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margen);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--margen), #000 calc(100% - var(--margen)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--margen), #000 calc(100% - var(--margen)), transparent 100%);
}
.filtros::-webkit-scrollbar { display: none; }
.cabecera-bloque .filtros { justify-self: stretch; }
.filtros .pastilla { scroll-snap-align: start; }
@media (min-width: 900px) {
  .filtros { flex-wrap: wrap; justify-content: center; overflow: visible; margin-inline: 0; padding-inline: 0; max-width: none; -webkit-mask-image: none; mask-image: none; }
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 12px;
}
@media (min-width: 720px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 20px; } }
@media (min-width: 1100px) { .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 24px; } }
.rejilla__vacia { grid-column: 1 / -1; text-align: center; color: var(--suave); padding: 40px 0; }

.tarjeta { min-width: 0; }
.tarjeta__enlace { display: grid; gap: 14px; text-decoration: none; }
.tarjeta__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--estudio);
  overflow: hidden;
  /* el pico cortado de la esquina, como en las fichas de moda */
  clip-path: polygon(0 0, 100% 0, 100% 88%, 84% 100%, 0 100%);
}
.tarjeta__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 500ms var(--curva), transform 900ms var(--curva);
}
.tarjeta__foto img + img { opacity: 0; }
@media (hover: hover) {
  .tarjeta__enlace:hover .tarjeta__foto img:first-child { transform: scale(1.035); }
  .tarjeta__enlace:hover .tarjeta__foto img + img { opacity: 1; }
}
.tarjeta__etiquetas { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; }
.tarjeta__texto { text-align: center; display: grid; gap: 4px; }
.tarjeta__nombre { font-size: 13px; font-weight: 420; line-height: 1.35; }
.tarjeta__precio { font-size: 13px; font-weight: 700; font-stretch: 112%; letter-spacing: .02em; }
.tarjeta--agotada .tarjeta__foto img { filter: grayscale(1) contrast(.85); opacity: .55; }
.tarjeta--agotada .tarjeta__precio { color: var(--suave); text-decoration: line-through; }
.tarjeta__enlace:focus-visible { outline-offset: 6px; }

.barra-tienda {
  display: grid; gap: 18px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.barra-tienda__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; border-top: 1px solid var(--linea); padding-top: 14px; }
.barra-tienda__contador { font-size: 13px; color: var(--suave); }
.ordenar { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-stretch: 115%; font-weight: 560; }
.ordenar select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--linea); border-radius: 0; background: var(--blanco)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 12px center;
  min-height: 40px; padding: 0 34px 0 12px;
  font-size: 13px; letter-spacing: 0; text-transform: none; font-stretch: 100%; font-weight: 400;
}

/* --------------------------------------------- 6 BLOQUES DE PORTADA */
.solo-escritorio { display: none; }
@media (min-width: 720px) { .solo-escritorio { display: initial; } }
/* en el móvil la portada enseña 6 prendas: menos scroll */
@media (max-width: 719px) { [data-limite-movil="6"] > .tarjeta:nth-child(n+7) { display: none; } }

.mas { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }

.bloque-cifras__rejilla { display: grid; gap: 48px; }
.bloque-cifras__texto { display: grid; gap: 22px; align-content: start; }
/* tamaños medidos para que «BAILAR» y «LOOKBOOK» quepan siempre en una línea */
.bloque-cifras__titulo { font-size: clamp(2.6rem, 13vw, 6.2rem); line-height: .88; }
@media (min-width: 1024px) {
  .bloque-cifras__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .bloque-cifras__titulo { font-size: min(7.4vw, 6.2rem); }
}

.carrusel { min-width: 0; }
.carrusel__cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.carrusel__flechas { display: flex; gap: 8px; }
.flecha-boton {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--tinta); background: transparent; border-radius: 0;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva), opacity var(--rapido);
}
.flecha-boton:hover:not([disabled]) { background: var(--tinta); color: var(--blanco); }
.flecha-boton[disabled] { opacity: .3; cursor: default; }
.flecha-boton svg { width: 16px; height: 16px; }
.carrusel__pista {
  display: grid;
  grid-auto-flow: column;
  /* ancho fijo por tarjeta: con minmax(0, …) se apretujaban todas cuando había muchas */
  grid-auto-columns: 62%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 720px) { .carrusel__pista { grid-auto-columns: calc(50% - 10px); gap: 20px; } }

.lookbook__cabecera { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 56px); }
.lookbook__titulo { font-size: clamp(2.3rem, 11.6vw, 10.4rem); line-height: .82; }
.lookbook__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: end; }
.lookbook__rejilla {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--margen) * -1);
  padding-inline: var(--margen);
  scroll-padding-inline: var(--margen);
}
.lookbook__rejilla::-webkit-scrollbar { display: none; }
.lb { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.lb__marco { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--estudio); }
.lb__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.lb:hover .lb__marco img { transform: scale(1.03); }
.lb figcaption { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-stretch: 112%; color: var(--suave); }
.lb--cita { align-content: end; padding: 8px 0; }
.lb--cita blockquote { font-size: clamp(1.15rem, 2.2vw, 1.7rem); font-weight: 650; font-stretch: 118%; text-transform: uppercase; line-height: 1.12; }
@media (min-width: 900px) {
  .lookbook__rejilla {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible; margin-inline: 0; padding-inline: 0; gap: 24px;
  }
  .lb--baja { margin-top: 18%; }
}

/* Línea Minimal: bloque negro con la frase en letra de máquina de escribir.
   Courier New ya viene en Windows, Mac, iPhone y iPad (en Android sale otra
   de máquina parecida): no hay que alojar ninguna letra. */
.maquina { font-family: "Courier New", Courier, "Nimbus Mono PS", "Liberation Mono", monospace; font-stretch: 100%; text-transform: none; letter-spacing: 0; }
.seccion--negra { background: var(--tinta); color: var(--gris); }
.seccion--negra .entradilla, .seccion--negra .texto-suave { color: #b9b9b5; }
.seccion--negra .tarjeta__foto { background: #222; }
.seccion--negra .boton { background: var(--gris); border-color: var(--gris); color: var(--tinta); }
.seccion--negra .boton:hover { background: transparent; color: var(--gris); }
.seccion--negra :focus-visible { outline-color: var(--gris); }
.minimal__cabecera { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: clamp(32px, 5vw, 60px); }
.minimal__titulo { font-size: clamp(2.6rem, 13vw, 8.4rem); line-height: .86; }
.minimal__frase { font-size: clamp(1.05rem, 2.6vw, 1.5rem); }
.minimal__frase .maquina::after { content: "_"; animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Detrás de cada camiseta: vídeos verticales de @tstagemadrid. Sin vídeos,
   solo el texto y los botones de Instagram y TikTok. */
.taller__rejilla { display: grid; gap: 40px; }
.taller__texto { display: grid; gap: 20px; align-content: start; }
.taller__titulo { font-size: clamp(2.3rem, 10vw, 6.2rem); line-height: .88; }
.taller__redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.taller__redes svg { width: 17px; height: 17px; }
.taller__videos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--margen) * -1);
  padding-inline: var(--margen);
  scroll-padding-inline: var(--margen);
}
.taller__videos::-webkit-scrollbar { display: none; }
.reel { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; min-width: 0; }
.reel__marco { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #222; cursor: pointer; }
.reel__marco video { width: 100%; height: 100%; object-fit: cover; }
.reel__boton {
  position: absolute; right: 10px; bottom: 10px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--gris); border-radius: 0;
  background: rgba(17, 17, 17, .55); color: var(--gris);
}
.reel__boton svg { width: 14px; height: 14px; }
.reel__boton .reel__pausa, .reel--sonando .reel__boton .reel__play { display: none; }
.reel--sonando .reel__boton .reel__pausa { display: block; }
.reel figcaption { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-stretch: 112%; color: #b9b9b5; }
.reel figcaption a { color: var(--gris); }
@media (min-width: 720px) { .taller__videos { grid-auto-columns: calc(33.333% - 8px); } }
@media (min-width: 1024px) {
  .taller__rejilla:has(.reel) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .taller__rejilla:has(.reel) .taller__titulo { font-size: clamp(2.3rem, 3.6vw, 4rem); }
  .taller__videos { margin-inline: 0; padding-inline: 0; gap: 16px; }
}

/* ------------------------------------------------------------- 7 FICHA */
.migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--suave); padding-block: 18px 22px; }
.migas a { color: var(--suave); }
.ficha__rejilla { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .ficha__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
  .ficha__info { position: sticky; top: calc(var(--cab) + 24px); }
}

.galeria { min-width: 0; display: grid; gap: 12px; }
.galeria__pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
  background: var(--estudio);
}
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__foto { scroll-snap-align: start; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; }
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria__puntos { display: flex; justify-content: center; gap: 8px; }
.galeria__puntos span { width: 22px; height: 2px; background: var(--linea); transition: background-color var(--rapido); }
.galeria__puntos span.activo { background: var(--tinta); }
.galeria__miniaturas { display: none; }
@media (max-width: 899px) {
  .galeria__pista { grid-auto-columns: 84%; gap: 8px; background: none; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); scroll-padding-inline: var(--margen); }
  .galeria__foto { background: var(--estudio); }
  .galeria--una .galeria__pista { grid-auto-columns: 100%; }
}
@media (min-width: 900px) {
  .galeria { grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
  .galeria__puntos { display: none; }
  .galeria__miniaturas { display: grid; gap: 10px; grid-row: 1; grid-column: 1; }
  .galeria__pista { grid-column: 2; }
  .galeria--una { grid-template-columns: minmax(0, 1fr); }
  .galeria--una .galeria__pista { grid-column: 1; }
  .galeria__mini {
    padding: 0; border: 1px solid transparent; background: var(--estudio); aspect-ratio: 3 / 4; border-radius: 0;
    opacity: .6; transition: opacity var(--rapido), border-color var(--rapido);
  }
  .galeria__mini img { width: 100%; height: 100%; object-fit: cover; }
  .galeria__mini:hover { opacity: 1; }
  .galeria__mini[aria-current="true"] { opacity: 1; border-color: var(--tinta); }
}

.ficha__info { display: grid; gap: 22px; min-width: 0; }
.ficha__cabeza { display: grid; gap: 10px; }
.ficha__nombre { font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 740; font-stretch: 122%; text-transform: uppercase; line-height: 1; letter-spacing: -.01em; }
.ficha__precio { font-size: 1.15rem; font-weight: 700; font-stretch: 112%; }
.ficha__precio small { font-size: 12px; font-weight: 400; color: var(--suave); font-stretch: 100%; margin-left: 6px; }
.ficha__form { display: grid; gap: 22px; }

.opciones { border: 0; padding: 0; margin: 0; min-width: 0; }
.opciones legend { padding: 0; margin-bottom: 12px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-stretch: 115%; font-weight: 560; }
.opciones legend span { color: var(--suave); text-transform: none; letter-spacing: .02em; font-stretch: 100%; font-weight: 400; margin-left: 6px; font-size: 13px; }
.opciones__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; display: inline-flex; }
.opcion input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span {
  display: grid; place-items: center;
  min-width: 52px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--linea);
  font-size: 13px; font-weight: 500;
  transition: border-color var(--rapido), background-color var(--rapido), color var(--rapido);
}
.opcion:hover span { border-color: var(--tinta); }
.opcion input:checked + span { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.opcion input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 3px; }
.opcion input:disabled { cursor: not-allowed; }
.opcion input:disabled + span { color: #a3a3a0; text-decoration: line-through; border-color: var(--linea); background: var(--gris); }
.opcion--color span { min-width: 44px; width: 44px; padding: 0; }
.opcion--color i { display: block; width: 30px; height: 30px; border: 1px solid rgba(0, 0, 0, .14); }
.opcion--color input:checked + span { background: var(--blanco); border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }

.ficha__comprar { display: flex; gap: 10px; }
.ficha__comprar .boton { flex: 1 1 auto; padding-inline: 14px; letter-spacing: .1em; }
.cantidad { display: inline-grid; grid-template-columns: 44px 44px 44px; border: 1px solid var(--linea); height: 52px; }
.cantidad button { border: 0; background: none; font-size: 18px; line-height: 1; }
.cantidad button:hover { background: var(--gris); }
.cantidad input {
  width: 100%; border: 0; text-align: center; font-size: 14px; font-weight: 600;
  appearance: textfield; -moz-appearance: textfield; background: transparent;
}
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad--peque { grid-template-columns: 36px 36px 36px; height: 38px; }
.cantidad--peque button { font-size: 15px; }
.cantidad--peque input { font-size: 13px; }

.ficha__mensaje { font-size: 13px; min-height: 1.2em; }
.ficha__mensaje.error { color: var(--aviso); }
.ventajas { display: grid; gap: 10px; padding: 18px 0; border-block: 1px solid var(--linea); font-size: 13px; color: var(--suave); }
.ventajas li { display: flex; gap: 12px; align-items: flex-start; }
.ventajas svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--tinta); }
.ficha__ref { font-size: 12px; color: var(--suave); letter-spacing: .04em; }
.ficha__nota { font-size: 12px; color: var(--suave); line-height: 1.5; max-width: 52ch; }

.plegable { border-bottom: 1px solid var(--linea); }
.plegable summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 52px;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-stretch: 115%; font-weight: 560;
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after { content: "+"; font-size: 18px; font-weight: 300; letter-spacing: 0; transition: transform var(--rapido) var(--curva); }
.plegable[open] summary::after { transform: rotate(45deg); }
.plegable__cuerpo { padding-bottom: 20px; font-size: 14px; color: var(--suave); display: grid; gap: 12px; }
.plegable__cuerpo ul { padding-left: 18px; }
.plegable--borde-arriba { border-top: 1px solid var(--linea); }

.tabla-envoltorio { overflow-x: auto; max-width: 100%; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--tinta); }
.tabla caption { text-align: left; font-size: 12px; color: var(--suave); padding-bottom: 8px; }
.tabla th, .tabla td { border-bottom: 1px solid var(--linea); padding: 9px 8px; text-align: center; white-space: nowrap; }
.tabla th:first-child, .tabla td:first-child { text-align: left; }
.tabla thead th { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; font-stretch: 112%; }

.relacionados { padding-block: var(--seccion); }
.relacionados h2 { margin-bottom: 28px; }

.no-encontrado { padding: 80px 0 120px; text-align: center; display: grid; gap: 18px; justify-items: center; }

/* ----------------------------------------------------- 8 CESTA Y PEDIDO */
.velo {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(17, 17, 17, .38);
  opacity: 0; transition: opacity 260ms var(--curva);
}
.velo.visible { opacity: 1; }
.panel {
  position: fixed; z-index: 80;
  inset: 0;
  display: flex; flex-direction: column;
  background: var(--blanco);
  opacity: 0; transform: translateY(16px);
  transition: opacity 260ms var(--curva), transform 320ms var(--curva);
}
.panel.abierto { opacity: 1; transform: none; }
@media (min-width: 720px) {
  .panel { left: auto; width: min(460px, 100%); border-left: 1px solid var(--linea); transform: translateX(32px); }
}
.panel__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 var(--margen); height: var(--cab); border-bottom: 1px solid var(--linea); flex: 0 0 auto; }
.panel__titulo { font-size: .8rem; font-weight: 700; font-stretch: 120%; letter-spacing: .14em; text-transform: uppercase; }
.panel__cerrar { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 560; font-stretch: 115%; }
.panel__cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 8px var(--margen); overscroll-behavior: contain; }
.panel__pie { flex: 0 0 auto; padding: 18px var(--margen) calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); display: grid; gap: 10px; background: var(--blanco); }
.panel__vacio { padding: 64px 0; text-align: center; display: grid; gap: 18px; justify-items: center; color: var(--suave); }

.linea-cesta { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.linea-cesta:last-child { border-bottom: 0; }
.linea-cesta__foto { aspect-ratio: 3 / 4; background: var(--estudio); overflow: hidden; display: block; }
.linea-cesta__foto img { width: 100%; height: 100%; object-fit: cover; }
.linea-cesta__datos { display: grid; gap: 4px; align-content: start; min-width: 0; }
.linea-cesta__nombre { font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.35; }
.linea-cesta__var { font-size: 12px; color: var(--suave); }
.linea-cesta__fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.linea-cesta__precio { font-size: 13px; font-weight: 700; font-stretch: 112%; }
.linea-cesta__quitar { justify-self: start; border: 0; background: none; padding: 6px 0; font-size: 12px; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.linea-cesta__quitar:hover { color: var(--tinta); }

.resumen { display: grid; gap: 10px; font-size: 14px; }
.resumen__fila { display: flex; justify-content: space-between; gap: 12px; }
.resumen__fila--total { padding-top: 12px; border-top: 1px solid var(--tinta); font-weight: 700; font-stretch: 112%; font-size: 15px; }
.resumen__nota { font-size: 12px; color: var(--suave); line-height: 1.5; }

.pagina-cesta { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .pagina-cesta { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .pagina-cesta__resumen { position: sticky; top: calc(var(--cab) + 24px); }
}
.pagina-cesta__resumen { background: var(--gris); padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.pagina-cesta .linea-cesta { grid-template-columns: 96px minmax(0, 1fr); }
@media (min-width: 720px) { .pagina-cesta .linea-cesta { grid-template-columns: 120px minmax(0, 1fr); } }

.pasos { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-stretch: 112%; color: var(--suave); margin-bottom: 18px; }
.pasos li { display: flex; align-items: center; gap: 8px; }
.pasos b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; font-weight: 600; letter-spacing: 0; }
.pasos [aria-current="step"] { color: var(--tinta); }
.pasos [aria-current="step"] b { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }

.formulario { display: grid; gap: 18px; }
.formulario fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.formulario legend { padding: 0; margin-bottom: 4px; font-size: .72rem; font-weight: 700; font-stretch: 120%; letter-spacing: .14em; text-transform: uppercase; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.campo label small { font-weight: 400; color: var(--suave); }
.campo input, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: 0; background: var(--blanco);
  font-size: 16px;   /* 16 px: el iPhone no hace zoom al escribir */
  transition: border-color var(--rapido);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:hover, .campo textarea:hover { border-color: #9a9a96; }
.campo input:focus, .campo textarea:focus { border-color: var(--tinta); outline: none; box-shadow: inset 0 0 0 1px var(--tinta); }
.campo__ayuda { font-size: 12px; color: var(--suave); }
.campo__error { font-size: 12px; color: var(--aviso); }
.campo--error input { border-color: var(--aviso); }
.dos-campos { display: grid; gap: 18px; }
@media (min-width: 560px) { .dos-campos { grid-template-columns: 1fr 1fr; } }

.eleccion { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--linea); cursor: pointer; }
.eleccion:has(input:checked) { border-color: var(--tinta); }
.eleccion input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tinta); }
.eleccion strong { display: block; font-size: 14px; color: var(--tinta); }
.eleccion > span > span { display: block; font-size: 13px; color: var(--suave); margin-top: 2px; }
.direccion-envio { display: grid; gap: 18px; }

.casilla { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 13px; color: var(--suave); cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tinta); }

.hecho { display: grid; gap: 18px; justify-items: start; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--tinta); }
.hecho__botones { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------- 9 PÁGINAS DE TEXTO */
.cabecera-pagina { padding-block: clamp(36px, 6vw, 80px) clamp(28px, 4vw, 48px); display: grid; gap: 18px; }
.texto-legal { max-width: 72ch; display: grid; gap: 14px; padding-bottom: var(--seccion); font-size: 15px; }
.texto-legal h2 { margin-top: 28px; font-size: 1rem; font-weight: 720; font-stretch: 118%; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; }
.texto-legal h3 { margin-top: 10px; font-size: 15px; font-weight: 700; }
.texto-legal ul, .texto-legal ol { padding-left: 20px; display: grid; gap: 6px; }
.texto-legal .actualizado { font-size: 13px; color: var(--suave); }
.texto-legal .formulario-modelo { display: grid; gap: 10px; margin: 0; padding: 16px 18px; border: 1px solid var(--linea); background: var(--blanco); font-size: 14px; }
.ficha-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; padding: 18px 20px; background: var(--gris); font-size: 14px; }
.ficha-datos dt { color: var(--suave); }
.ficha-datos dd { overflow-wrap: anywhere; }
@media (max-width: 420px) { .ficha-datos { grid-template-columns: minmax(0, 1fr); gap: 0; } .ficha-datos dd { margin-bottom: 8px; } }
.indice { display: flex; flex-wrap: wrap; gap: 8px; }
.indice .pastilla { display: inline-flex; align-items: center; text-decoration: none; }
.casilla-caja { display: grid; gap: 6px; }
.formulario-tipo { padding: 18px 20px; border: 1px dashed var(--linea); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

.sobre__rejilla { display: grid; gap: 32px; }
@media (min-width: 900px) { .sobre__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; } }
.sobre__foto { background: var(--estudio); overflow: hidden; }
.sobre__foto img { width: 100%; height: auto; }
.sobre__texto { display: grid; gap: 16px; font-size: 16px; }
.sobre__texto p { max-width: 58ch; }
.pasos-compra { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); counter-reset: paso; }
.pasos-compra li { background: var(--blanco); padding: 22px; display: grid; gap: 8px; align-content: start; }
.pasos-compra b { font-size: 1.6rem; font-weight: 760; font-stretch: 125%; line-height: 1; }
.pasos-compra h3 { font-size: .74rem; font-weight: 700; font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; }
.pasos-compra p { font-size: 14px; color: var(--suave); }
@media (min-width: 720px) { .pasos-compra { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pasos-compra { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------- 10 PIE */
.pie { background: var(--gris); padding-top: clamp(48px, 7vw, 88px); font-size: 14px; }
.pie__rejilla { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pie__marca-bloque { grid-column: 1 / -1; display: grid; gap: 14px; max-width: 34ch; }
.pie__marca-bloque img { width: 84px; height: auto; }
.pie__marca-bloque p { color: var(--suave); }
.pie__titulo { margin-bottom: 12px; }
.pie ul { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie address { font-style: normal; color: var(--suave); }
.pie__contacto { grid-column: 1 / -1; display: grid; gap: 6px; }
.pie__redes { display: flex; gap: 14px; margin-top: 8px; }
.pie__redes a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linea); }
.pie__redes a:hover { border-color: var(--tinta); text-decoration: none; }
.pie__redes svg { width: 17px; height: 17px; }
@media (min-width: 900px) {
  .pie__rejilla { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); }
  .pie__marca-bloque, .pie__contacto { grid-column: auto; }
}
.pie__gigante {
  container-type: inline-size;
  margin-top: clamp(40px, 6vw, 72px);
  overflow: hidden;
}
.pie__gigante span {
  display: block;
  font-size: 18.4cqi;
  font-weight: 800;
  font-stretch: 125%;
  line-height: .78;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transform: translateY(.06em);
}
.pie__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding-block: 18px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  font-size: 12px; color: var(--suave);
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ------------------------------------------------------- 11 ANIMACIONES */
/* Discretas, solo de abajo arriba (nunca de lado) y solo si la persona
   no ha pedido «reducir movimiento». Sin JS todo se ve desde el principio. */
@media (prefers-reduced-motion: no-preference) {
  html.js .aparece { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--curva), transform 900ms var(--curva); transition-delay: var(--retraso, 0ms); }
  html.js .aparece.visto { opacity: 1; transform: none; }

  html.js .collage__foto { opacity: 0; transition: opacity 900ms var(--curva), transform 1100ms var(--curva); }
  html.js .collage__foto--a { transform: rotate(-1deg) translateY(24px); }
  html.js .collage__foto--b { transform: rotate(1deg) translateY(36px); transition-delay: 120ms; }
  html.js .collage.visto .collage__foto { opacity: 1; }
  html.js .collage.visto .collage__foto--a { transform: rotate(-5deg); }
  html.js .collage.visto .collage__foto--b { transform: rotate(6deg); }

  html.js .portada__titulo { animation: subir 900ms var(--curva) both; }
  @keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}