/* A · TINTA VIVA — la portada es la marca hecha movimiento: tinta china
   abriéndose en agua (static/tinta.js, WebGL). El título vive en
   mix-blend:difference, así se lee sobre el papel y sobre la tinta. */
.tema-a .vt-barra{background:var(--tinta)}

.a-hero{position:relative;height:calc(100svh - 56px);min-height:600px;overflow:hidden;color:var(--tinta);
  background:var(--salvia);display:flex;flex-direction:column;justify-content:space-between;
  padding:18px 18px 26px;touch-action:pan-y}
#tinta{position:absolute;inset:0;width:100%;height:100%;display:block}
#tinta.sin-gl{background:var(--salvia) url("vt-simbolo.svg") 70% 60%/90% no-repeat}
.a-hero>*:not(canvas){position:relative;z-index:1}
.a-hero-arriba{display:flex;justify-content:space-between;font:600 10.5px/1 var(--mont);
  letter-spacing:.24em;text-transform:uppercase;color:var(--tinta)}
.vt .a-titulo{font-family:var(--caslon-grande);font-weight:400;line-height:.82;letter-spacing:-.035em;
  font-size:clamp(84px,26vw,250px);color:var(--tinta);margin-top:auto}
.a-titulo span{display:block;animation:sube-t 1.2s cubic-bezier(.2,.8,.2,1) both}
.a-titulo span+span{animation-delay:.12s;padding-left:.32em}
@keyframes sube-t{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.a-hero-abajo{margin-top:22px;color:var(--tinta)}
.a-hero-abajo p{font-size:15px;line-height:1.5;max-width:34ch;color:#2a2c2a}
.a-hero-abajo .vt-busca{margin-top:16px;max-width:520px}
.a-toca{display:block;margin-top:14px;font:600 10px/1 var(--mont);letter-spacing:.24em;
  text-transform:uppercase;color:#4a4f4b;animation:respira 2.4s ease-in-out infinite}
@keyframes respira{50%{opacity:.35}}
@media(min-width:760px){.a-hero{padding:90px 48px 40px}.a-hero-abajo{display:grid;
  grid-template-columns:1fr 1fr;gap:30px;align-items:end}.a-toca{grid-column:1/-1}}

/* el índice: filas enormes, la portada asoma al pasar */
.a-indice{border-top:1.5px solid var(--tinta);margin-top:0}
.a-fila{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;
  gap:10px;padding:22px 18px;border-bottom:1.5px solid var(--tinta);text-decoration:none;
  overflow:hidden;transition:background .35s,color .35s}
.a-fila .n{font:600 11px/1 var(--mont);letter-spacing:.18em}
.a-fila .t{font-family:var(--caslon-grande);font-size:clamp(40px,12vw,104px);line-height:.95;
  letter-spacing:-.025em;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.a-fila .c{font:600 12px/1 var(--mont);letter-spacing:.06em}
.a-fila img{position:absolute;right:64px;top:50%;width:84px;aspect-ratio:2/3;object-fit:cover;
  transform:translateY(-50%) rotate(6deg) scale(.6);opacity:0;transition:all .45s cubic-bezier(.2,.8,.2,1);
  border:1.5px solid var(--tinta)}
.a-fila:hover,.a-fila:focus-visible{background:var(--tinta);color:#fff}
.a-fila:hover .t{transform:translateX(14px)}
.a-fila:hover img{opacity:1;transform:translateY(-50%) rotate(-4deg) scale(1)}
@media(min-width:760px){.a-fila{padding:26px 48px;grid-template-columns:60px 1fr auto}
  .a-fila img{width:130px;right:140px}}
@media(max-width:759px){.a-fila img{opacity:1;transform:translateY(-50%) rotate(4deg) scale(.82);
  width:58px;right:58px}}

.a-estante{padding:56px 0 0}
.a-cabeza{padding:0 18px}
.a-cabeza h2{font-family:var(--caslon-grande);font-weight:400;font-size:clamp(44px,12vw,92px);
  line-height:.9;letter-spacing:-.025em;margin-top:8px}
.a-tira{display:grid;grid-auto-flow:column;grid-auto-columns:41%;gap:16px;overflow-x:auto;
  padding:22px 18px 8px;scroll-snap-type:x mandatory;scroll-padding:0 18px;scrollbar-width:none}
.a-tira::-webkit-scrollbar{display:none}
.a-tira>*{scroll-snap-align:start}
@media(min-width:760px){.a-cabeza{padding:0 48px}.a-tira{grid-auto-columns:21%;padding:30px 48px 8px;
  scroll-padding:0 48px}.a-estante{padding-top:90px}}

/* las etiquetas que se mecen */
.a-etiquetas{display:grid;gap:30px;margin:64px 18px 0;padding:30px 22px;background:var(--lavanda);
  border:1.5px solid var(--tinta);overflow:hidden}
.a-etiquetas h2{font-family:var(--caslon-grande);font-weight:400;font-size:clamp(34px,9vw,64px);
  line-height:.95;letter-spacing:-.02em;margin:10px 0 18px}
.a-etiquetas .vt-ceja{color:var(--tinta)}
.a-etiquetas .vt-boton{width:auto;display:inline-flex;padding:0 20px}
.a-colgadas{display:flex;justify-content:center;gap:16px;min-height:200px}
.a-colgada{position:relative;width:92px;height:128px;margin-top:36px;transform-origin:50% -36px;
  animation:mece 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.8s);
  border:1.5px solid var(--tinta);display:flex;align-items:center;justify-content:center}
.a-colgada::before{content:"";position:absolute;left:50%;top:-36px;height:36px;width:1.5px;background:var(--tinta)}
.a-colgada i{position:absolute;top:10px;left:50%;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--lavanda);border:1.5px solid var(--tinta)}
.a-colgada b{font-family:var(--caslon-grande);font-weight:400;font-size:30px}
.a-colgada.coral{background:var(--coral)}.a-colgada.lavanda{background:#fff}.a-colgada.salvia{background:var(--salvia)}
@keyframes mece{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@media(min-width:760px){.a-etiquetas{grid-template-columns:1.2fr 1fr;margin:90px 48px 0;padding:48px}}
@media (prefers-reduced-motion:reduce){.a-colgada,.a-toca{animation:none}}

/* ============ A v2 (27-oct): el MANUAL de Vidas en Tinta + el GUINDA de la ECA, con la
   gramática medida de Aesop (crema cálido, 14 px callados, esquinas 0) y Daunt Books
   (estantes por categoría, portadas con sombra de libro de verdad). */
.tema-a{--coral:#9C2B2F;--coral-hondo:#7E2126;--guinda:#9C2B2F;--hueso:#EDDAD5;
  --papel-vt:#FBFAF4;background:var(--papel-vt)}
/* sobre guinda va texto blanco (7.45:1), nunca tinta */
.tema-a .vt-boton:hover,.tema-a .vt-cuenta span,.tema-a .bolsa .n,.tema-a .vt-bolsa-mini b,
.tema-a .opcion input:checked+span,.tema-a .opcion input:checked+span small,
.tema-a .cajon .boton,.tema-a .vt-libro .marca-tinta,.tema-a.portada .boton.ancho,
.tema-a .vt-temas a[aria-current=true]{color:#fff!important}
.tema-a .vt-cabeza{background:var(--salvia)}
.tema-a .vt-cita cite,.tema-a .instruccion .que{color:#D9787C}

/* portadas como libros de verdad: sombra física, sin marco */
.tema-a .vt-libro .tapa{border:0;box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 22px -10px rgba(17,17,16,.45);
  background:#fff}
.tema-a .vt-libro .nom{font-size:16px}
.tema-a .vt-libro .aut{font-size:12.5px}
.a-ficha{text-decoration:none;display:block}

/* la página negra del manual: la V chica al centro, y el lema de la ECA */
.a-negra{background:var(--tinta);color:#fff;text-align:center;padding:84px 22px 74px;
  display:flex;flex-direction:column;align-items:center;gap:26px}
.a-negra .vt-simbolo{width:120px;color:#fff}
.a-lema{font-family:var(--caslon-grande);font-size:clamp(34px,9.5vw,70px);line-height:1;
  letter-spacing:-.02em;max-width:14ch}
.a-negra .vt-ceja{color:rgba(255,255,255,.55)}

/* encabezado de estante, como Daunt: título serif y "ver" discreto */
.a-cabeza-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--linea-vt);padding-bottom:12px;margin:0 18px;padding-left:0;padding-right:0}
.a-cabeza-fila h2{font-size:clamp(34px,9vw,60px)!important;margin:0!important}
.a-cabeza-fila a{font:600 11px/1 var(--mont);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;text-decoration:underline;text-decoration-color:var(--guinda);
  text-decoration-thickness:2px;text-underline-offset:5px}
@media(min-width:760px){.a-cabeza-fila{margin:0 48px}}

/* los cuadros de color del manual, con la V al centro */
.a-cuadros{padding-top:64px}
.a-cuadros-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:22px 18px 0}
@media(min-width:760px){.a-cuadros-rejilla{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:30px 48px 0}
  .a-cuadros{padding-top:96px}}
.a-cuadro{aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-decoration:none;position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.a-cuadro:hover{transform:translateY(-4px)}
.a-cuadro .vt-simbolo{width:46%;margin-bottom:10px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.a-cuadro:hover .vt-simbolo{transform:scale(1.08) rotate(-4deg)}
.a-cuadro .t{font:600 12px/1 var(--mont);letter-spacing:.2em;text-transform:uppercase}
.a-cuadro .c{font-family:var(--caslon);font-size:15px}
.a-cuadro.guinda{background:var(--guinda);color:#fff}.a-cuadro.guinda .vt-simbolo{color:var(--salvia)}
.a-cuadro.lavanda{background:var(--lavanda);color:var(--tinta)}
.a-cuadro.salvia{background:var(--salvia);color:var(--tinta)}
.a-cuadro.tinta{background:var(--tinta);color:#fff}

/* el recorte gigante de la V con la mancha saliéndose (página 8 del manual) */
.a-v{position:relative;overflow:hidden;background:var(--salvia);margin-top:80px;min-height:560px;
  display:flex;align-items:flex-start;padding:40px 22px}
.a-v .vt-simbolo{position:absolute;left:-26%;bottom:-6%;width:160%;color:var(--tinta)}
.a-v-texto{position:relative;z-index:1}
.a-v blockquote{font-family:var(--caslon-grande);font-size:clamp(54px,15vw,120px);line-height:.9;letter-spacing:-.03em}
.a-v cite{display:block;margin-top:12px;font:600 11px/1 var(--mont);letter-spacing:.22em;
  text-transform:uppercase;font-style:normal;color:var(--guinda)}
@media(min-width:760px){.a-v{min-height:640px;padding:70px 48px}.a-v .vt-simbolo{width:90%;left:12%;bottom:-30%}}

.a-firma{background:var(--tinta);padding:40px 18px}
.a-firma img{width:100%;max-width:900px;margin:0 auto;display:block}
.tema-a .vt-pie{margin-top:0}

.tema-a.inicio main{padding-bottom:0}

/* ============ A v3 (27-oct, Ale: "agrégale más color: blanco, rojo, rosa").
   El salvia del manual se queda SOLO en el fondo de las fotos de producto; la
   página es papel blanco, rosa hueso y guinda de la ECA. */
.tema-a{--rosa-vt:#F3E1DC;--rosa-hondo:#E7C6BE;--salvia:#F3E1DC}
.tema-a .vt-barra{background:var(--guinda)}
.tema-a .vt-bolsa-mini b{background:#fff;color:var(--guinda)!important}
.a-hero{background:var(--rosa-vt)}
#tinta.sin-gl{background-color:var(--rosa-vt)}
.vt .a-titulo span+span{color:var(--guinda)}
.a-hero-abajo p{color:#3a2a28}
.a-toca{color:var(--guinda)}
.tema-a .vt-busca button{background:var(--guinda);border-color:var(--guinda);color:#fff}
.a-negra{background:var(--guinda)}
.a-negra .vt-ceja{color:rgba(255,255,255,.75)}
.a-v{background:var(--rosa-vt)}
.a-v .vt-simbolo{color:var(--guinda)}
.a-v cite{color:var(--guinda)}
.a-firma{background:var(--guinda-hondo,#6E1E22)}
.tema-a .vt-cabeza{background:var(--rosa-vt)}
.tema-a .vt-libro .boton,.tema-a .vt-libro button{background:var(--guinda);border-color:var(--guinda);color:#fff}

/* los cuadros de pulseras/anillos/collares: la foto de la pieza a sangre */
.a-cuadro.foto{justify-content:flex-end;align-items:stretch;padding:0;overflow:hidden;
  background:var(--rosa-vt)}
.a-cuadro.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.a-cuadro.foto:hover img{transform:scale(1.05)}
.a-cuadro.foto .pie{position:relative;background:var(--guinda);color:#fff;padding:12px 12px 13px;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.a-cuadro.foto.rosa .pie{background:#fff;color:var(--tinta)}
.a-cuadro.foto.rosa .pie .c{color:var(--guinda)}
.a-cuadro.foto .t{font-size:11.5px}
.a-cuadro.foto .c{font-size:17px}
.tema-a .a-cuadro.tinta{background:#fff;color:var(--guinda);outline:1.5px solid var(--guinda);outline-offset:-1.5px}
.tema-a .a-cuadro.tinta .vt-simbolo{color:var(--guinda)}

/* ============ A v4 (31-oct, Ale: "la animación inicial se ve barata... backgrounds como
   en la página de QUVO... un carrusel que se vea muy bien en el teléfono... que se vea
   premium"). Fuera la tinta en WebGL. La portada es la tienda real en video con la
   técnica del sitio de QUVO (fondo desenfocado + video nítido encima), una etiqueta con
   punto que respira, y la marca en blanco. Todo lo demás se calma: líneas de 1 px,
   botones chicos, el guinda solo donde importa. */
.tema-a .vt-barra{background:rgba(17,17,16,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tema-a.inicio .vt-barra{position:fixed;left:0;right:0;background-color:transparent;
  background-image:linear-gradient(rgba(10,9,9,.55),rgba(10,9,9,0));
  -webkit-backdrop-filter:none;backdrop-filter:none}
.tema-a.inicio.bajo .vt-barra{background-color:rgba(17,17,16,.92);background-image:none;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tema-a .vt-bolsa-mini b{background:var(--guinda);color:#fff!important}

.h-hero{position:relative;min-height:100svh;overflow:hidden;background:#140f0e;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;padding:0 20px 40px}
.h-fondo{position:absolute;inset:0}
.h-fondo-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(34px) brightness(.55) saturate(1.1);transform:scale(1.25)}
.h-fondo-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-kb{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2%,-2%)}}
.h-velo{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,8,8,.35) 0%,rgba(10,8,8,0) 28%,rgba(10,8,8,.15) 52%,rgba(12,8,8,.86) 100%)}
.h-sobre{position:relative;z-index:1;max-width:640px}
.h-etiqueta{display:inline-flex;align-items:center;gap:9px;font:500 11px/1 var(--mont);
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.88);
  padding:9px 13px 9px 11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.h-etiqueta i{width:7px;height:7px;border-radius:50%!important;background:#5BD08C;
  box-shadow:0 0 0 0 rgba(91,208,140,.7);animation:latido 2.2s ease-out infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(91,208,140,.6)}70%{box-shadow:0 0 0 9px rgba(91,208,140,0)}100%{box-shadow:0 0 0 0 rgba(91,208,140,0)}}
.vt .h-titulo{font-family:var(--caslon-grande);font-weight:400;font-size:clamp(66px,19vw,168px);
  line-height:.86;letter-spacing:-.035em;margin:20px 0 0;color:#fff}
.h-titulo em{font-style:normal;display:block;color:#F3D3CC}
.h-sobre p{margin-top:16px;font-size:15.5px;line-height:1.5;max-width:32ch;color:rgba(255,255,255,.82)}
.h-busca{margin-top:22px;border:0;background:rgba(255,255,255,.96)}
.tema-a .h-busca button{background:var(--guinda);color:#fff}
.h-baja{display:none;position:absolute;z-index:1;right:20px;bottom:46px;width:44px;height:44px;
  border:1px solid rgba(255,255,255,.35);align-items:center;justify-content:center}
.h-baja span{width:9px;height:9px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(45deg) translate(-2px,-2px)}
@media(min-width:760px){
  .h-hero{padding:0 56px 64px}
  .h-fondo-v{left:auto;right:0;width:46%;max-width:620px}
  .h-velo{background:linear-gradient(90deg,rgba(10,8,8,.82) 0%,rgba(10,8,8,.45) 50%,rgba(10,8,8,0) 70%),
    linear-gradient(180deg,rgba(10,8,8,.3),rgba(10,8,8,0) 30%)}
  .h-baja{display:flex;right:56px;bottom:64px}
}
@media (prefers-reduced-motion:reduce){.h-kb,.h-etiqueta i{animation:none}}

/* el carrusel: tarjetas grandes que se deslizan con el dedo y se asoma la siguiente */
.h-carrusel{padding:64px 0 8px;background:var(--papel-vt)}
.h-cab{padding:0 20px}
.h-cab h2,.vt .h-cab h2{font-family:var(--caslon-grande);font-weight:400;font-size:clamp(40px,11vw,76px);
  line-height:.92;letter-spacing:-.03em;margin-top:10px}
.h-pista{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;
  padding:24px 20px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.h-pista::-webkit-scrollbar{display:none}
.h-slide{flex:0 0 78%;scroll-snap-align:start;position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--rosa-vt);text-decoration:none;color:#fff}
.h-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.h-slide:hover img{transform:scale(1.04)}
.h-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(14,10,10,.72) 100%)}
.h-slide-v{position:absolute;left:50%;top:42%;width:52%;transform:translate(-50%,-50%);color:var(--guinda)}
.h-slide-pie{position:absolute;z-index:1;left:18px;right:18px;bottom:18px;display:grid;
  grid-template-columns:auto 1fr;column-gap:12px;align-items:end}
.h-n{grid-row:1/3;font:500 11px/1 var(--mont);letter-spacing:.14em;color:rgba(255,255,255,.7);
  padding-bottom:5px;border-right:1px solid rgba(255,255,255,.35);padding-right:12px;align-self:stretch;
  display:flex;align-items:flex-end}
.h-slide-pie b{font-family:var(--caslon-grande);font-weight:400;font-size:clamp(32px,9vw,46px);line-height:.95;letter-spacing:-.02em}
.h-slide-pie small{font:500 11.5px/1.2 var(--mont);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-top:8px}
.h-puntos{display:flex;gap:6px;padding:14px 20px 0}
.h-puntos i{width:18px;height:2px;background:rgba(17,17,16,.16);transition:background .3s,width .3s}
.h-puntos i.on{background:var(--guinda);width:34px}
@media(min-width:760px){.h-cab{padding:0 56px}.h-pista{padding:30px 56px 6px;scroll-padding:0 56px}
  .h-slide{flex-basis:31%}.h-puntos{padding:16px 56px 0}.h-carrusel{padding-top:96px}}

/* estantes y tarjetas: calma y precisión */
.tema-a .a-cabeza-fila{border-bottom:1px solid rgba(17,17,16,.12)}
.tema-a .a-cabeza-fila a{font-weight:500;letter-spacing:.12em;text-decoration-thickness:1px}
.tema-a .vt-libro .tapa{box-shadow:0 1px 0 rgba(0,0,0,.06),0 12px 24px -14px rgba(17,17,16,.5)}
.tema-a .vt-libro .nom{font-size:15.5px;line-height:1.2;margin-top:12px}
.tema-a .vt-libro .pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.tema-a .vt-libro .pie form{margin:0}
.tema-a .vt-libro .pre{font-weight:500;font-size:14.5px;letter-spacing:.01em}
.vt-mas{width:38px;height:38px;flex:none;border:1px solid var(--tinta);background:#fff;color:var(--tinta);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s}
.vt-mas span{font-size:20px;line-height:1;font-weight:300;margin-top:-2px}
.vt-mas:hover,.vt-mas:active{background:var(--tinta);color:#fff}
.tema-a .vt-libro .vt-mas{background:#fff!important;color:var(--tinta)!important;border-color:var(--tinta)!important}
.tema-a .vt-libro .vt-mas:hover{background:var(--tinta)!important;color:#fff!important}
.vt-cuenta.chica{border-width:1px;height:38px}
.vt-cuenta.chica button{width:32px;font-size:17px}
.vt-cuenta.chica span{min-width:26px;font-size:13.5px}
.tema-a .vt-libro .marca-tinta{background:var(--guinda);color:#fff;font-weight:500;letter-spacing:.1em}
.tema-a .vt-libro .marca-tinta.ultimo{background:var(--tinta)}

/* el lema de la ECA */
.h-lema{background:var(--guinda);color:#fff;text-align:center;padding:84px 22px 72px;margin-top:80px;
  display:flex;flex-direction:column;align-items:center;gap:24px}
.h-lema .vt-simbolo{width:96px;color:#fff}
.h-lema p{font-family:var(--caslon-grande);font-size:clamp(34px,9.5vw,68px);line-height:1;letter-spacing:-.02em;max-width:14ch}
.h-lema .vt-ceja{color:rgba(255,255,255,.72)}

/* cómo se compra */
.h-como{padding:56px 20px 8px;max-width:1100px;margin:0 auto}
.h-como ol{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid rgba(17,17,16,.12)}
.h-como li{display:grid;grid-template-columns:28px 1fr;gap:4px 14px;padding:18px 0;border-bottom:1px solid rgba(17,17,16,.12);counter-increment:paso}
.h-como li::before{content:"0" counter(paso);grid-row:1/3;font:500 11px/1.6 var(--mont);letter-spacing:.12em;color:var(--guinda)}
.h-como li b{font-family:var(--caslon-grande);font-weight:400;font-size:26px;line-height:1}
.h-como li span{font-size:14px;color:var(--gris-vt)}
.h-como a{display:inline-block;margin-top:18px;font:500 11px/1 var(--mont);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:underline;text-decoration-color:var(--guinda);text-underline-offset:5px}
@media(min-width:760px){.h-como{padding:80px 56px 8px}.h-como ol{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;border:0}
  .h-como li{border-top:1px solid rgba(17,17,16,.12)}}

/* cabecera de sección con su foto */
.tema-a .vt-cabeza{border-bottom:1px solid rgba(17,17,16,.12)}
.tema-a .vt-cabeza.con-foto{position:relative;background:#1a1414 var(--foto) center/cover;color:#fff;padding-top:120px}
.tema-a .vt-cabeza.con-foto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,8,.15),rgba(10,8,8,.78))}
.tema-a .vt-cabeza.con-foto>*{position:relative}
.tema-a .vt-cabeza.con-foto h1,.tema-a .vt-cabeza.con-foto p{color:#fff}
.tema-a .vt-cabeza.con-foto p{color:rgba(255,255,255,.85)}
.tema-a .vt-cabeza.con-foto .vt-chips a{color:rgba(255,255,255,.8)}
.tema-a .vt-cabeza.con-foto .vt-chips a[aria-current=page]{background:#fff;color:var(--tinta)}
.tema-a .vt-cabeza.con-foto .vt-busca{border-color:#fff}
.vt-sinprecio{margin:44px 18px 0}
.vt-sinprecio p{font-size:13.5px;color:var(--gris-vt);margin:10px 0 18px;max-width:52ch}
@media(min-width:760px){.vt-sinprecio{margin:56px 48px 0}}

/* la galería de la ficha: se desliza con el dedo */
.ficha-tapa.galeria-tienda,.ficha-tapa{position:relative}
.ficha-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%}
.ficha-pista::-webkit-scrollbar{display:none}
.ficha-cuadro{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ficha-cuadro img,.ficha-cuadro video{width:100%;height:100%;object-fit:cover}
.ficha-cuadro.es-libro{padding:9% 20%}
.ficha-cuadro.es-libro img{object-fit:contain;box-shadow:0 2px 0 rgba(0,0,0,.06),0 22px 40px -18px rgba(17,17,16,.55)}
.tema-a .ficha-tapa{padding:0;background:var(--rosa-vt);display:block}
.ficha-puntos{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:6px}
.ficha-puntos i{width:16px;height:2px;background:rgba(17,17,16,.25)}
.ficha-puntos i.on{background:var(--guinda);width:28px}
/* el precio y el "+" siempre al pie de la tarjeta, aunque el título ocupe 1 o 3 renglones */
.tema-a .vt-libro{height:100%}
.tema-a .vt-libro .pie{margin-top:auto;padding-top:8px}
.tema-a .vt-libro .a-ficha{flex:1 0 auto;margin-bottom:6px}
.tema-a .vt-cabeza.con-foto .vt-chips a{background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff;margin-right:-1px}
.tema-a .vt-cabeza.con-foto .vt-chips a[aria-current=page]{background:#fff;color:var(--tinta);border-color:#fff}
.vt .vt-sp-t{font-family:var(--caslon-grande);font-weight:400;font-size:clamp(30px,8vw,48px);line-height:1;letter-spacing:-.02em}
.tema-a .vt-etiqueta .colgante{border-width:1px}
.tema-a .vt-etiqueta .vt-boton{background:#fff!important;color:var(--tinta)!important;border:1px solid var(--tinta)!important;min-height:44px;font-weight:500}
.tema-a .vt-etiqueta .vt-boton:hover{background:var(--tinta)!important;color:#fff!important}