/* ============================================================
   MARCÉ NOIR — VERSIÓN 2
   Sistema editorial: la casa contada como número de revista.
   ------------------------------------------------------------
   Nada de esto comparte código con la versión 1. Es otro sistema.

   Índice
   01. Tokens
   02. Base y tipografía
   03. Estructura y folios
   04. Portada
   05. Sumario
   06. Doble página editorial
   07. Hoja de contactos
   08. Créditos y precios
   09. Feed
   10. Formularios y pie
   11. Movimiento y accesibilidad
   ============================================================ */

/* ============================================================
   01. TOKENS
   ============================================================ */
:root {
  /* Papel y tinta */
  --v2-papel:     #F2EEE7;
  --v2-papel-alt: #E7E1D6;
  --v2-tinta:     #100E0D;
  --v2-tinta-sof: #4A423C;
  --v2-tinta-mut: #655A51;

  /* Acentos: el oro de la casa y el rojo del vivo de la funda */
  --v2-oro:       #B89B58;
  --v2-oro-deep:  #7A5D22;
  --v2-rojo:      #A32732;
  --v2-azul:      #8AABC5;

  --v2-linea:     rgba(16, 14, 13, .18);
  --v2-linea-inv: rgba(242, 238, 231, .24);

  /* Dos voces: didona de titular, grotesca de pie de foto */
  --v2-titular: "Bodoni Moda", "Didot", Georgia, serif;
  --v2-texto:   "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* El mínimo iguala la mitad del canal g-5 de Bootstrap (3rem),
     que es lo que cancela el margen negativo de .row en móvil. */
  --v2-marco: clamp(1.5rem, 3.2vw, 3rem);
  --v2-aire:  clamp(4rem, 8vw, 9rem);
  --v2-curva: cubic-bezier(.22, .61, .36, 1);

  /* Bootstrap, vestido de revista */
  --bs-body-font-family: var(--v2-texto);
  --bs-body-color: var(--v2-tinta);
  --bs-body-bg: var(--v2-papel);
  --bs-border-radius: 0;
  --bs-link-color: var(--v2-tinta);
  --bs-link-hover-color: var(--v2-rojo);
}

/* ============================================================
   02. BASE Y TIPOGRAFÍA
   ============================================================ */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Recorta cualquier desborde lateral residual sin bloquear el scroll
     vertical ni el desplazamiento de la hoja de contactos. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--v2-papel);
  color: var(--v2-tinta);
  font-family: var(--v2-texto);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--v2-tinta); color: var(--v2-papel); }

/* --- Titulares: didona, muy apretada -------------------------- */
.ed-titular {
  font-family: var(--v2-titular);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
  text-transform: uppercase;
}
.ed-titular--masthead { font-size: clamp(3rem, 13.5vw, 15rem); font-weight: 600; letter-spacing: -.035em; }
.ed-titular--xl { font-size: clamp(2.6rem, 8.5vw, 7.5rem); }
.ed-titular--l  { font-size: clamp(2rem, 5.4vw, 4.4rem); }
.ed-titular--m  { font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: .98; }
.ed-titular--s  { font-size: clamp(1.1rem, 1.9vw, 1.5rem); line-height: 1.05; letter-spacing: 0; }

/* Cursiva didona: el recurso de énfasis de la revista */
.ed-cursiva { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; }

/* --- Pies, rótulos y créditos --------------------------------- */
.ed-rotulo {
  font-family: var(--v2-texto);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0;
  display: block;
}
.ed-rotulo--rojo { color: var(--v2-rojo); }
.ed-rotulo--oro { color: var(--v2-oro-deep); }
/* Sobre tinta el oro profundo se hunde: ahí va el oro de marca. */
.sobre-tinta .ed-rotulo--oro { color: var(--v2-oro); }
.sobre-tinta .ed-rotulo--rojo { color: #E0868D; }
.ed-rotulo--mut { color: var(--v2-tinta-mut); }

.ed-pie {
  font-size: .6875rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--v2-tinta-mut);
  margin: 0;
}
.ed-texto {
  font-size: .9375rem;
  line-height: 1.72;
  color: var(--v2-tinta-sof);
  margin: 0 0 1.1rem;
}
.ed-texto:last-child { margin-bottom: 0; }

/* Entradilla: primera línea de una historia, más grande */
.ed-entradilla {
  font-family: var(--v2-titular);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.42;
  color: var(--v2-tinta);
  margin: 0 0 1.4rem;
}

/* Capitular: arranca la historia como en papel */
.ed-capitular::first-letter {
  font-family: var(--v2-titular);
  font-weight: 600;
  font-size: 3.6em;
  line-height: .78;
  float: left;
  padding: .06em .12em 0 0;
  color: var(--v2-tinta);
}

.sobre-tinta { color: var(--v2-papel); }
.sobre-tinta .ed-texto { color: rgba(242, 238, 231, .74); }
.sobre-tinta .ed-pie { color: rgba(242, 238, 231, .6); }
.sobre-tinta .ed-entradilla { color: var(--v2-papel); }
.sobre-tinta .ed-rotulo--mut { color: rgba(242, 238, 231, .6); }

/* ============================================================
   03. ESTRUCTURA Y FOLIOS
   ============================================================ */
.caja {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--v2-marco);
}
.caja--ancha { max-width: 1860px; }
.caja--angosta { max-width: 900px; }

.pliego { padding-block: var(--v2-aire); position: relative; }
.pliego--corto { padding-block: clamp(2.5rem, 5vw, 5rem); }
.pliego--sangre { padding-inline: 0; }

.papel      { background: var(--v2-papel); }
.papel-alt  { background: var(--v2-papel-alt); }
.tinta      { background: var(--v2-tinta); }
.azul       { background: var(--v2-azul); }
/* El azul es un fondo claro: encima, el texto de apoyo va en tinta plena. */
.azul .ed-texto,
.azul .marca-ed label { color: var(--v2-tinta); }
.azul .campo__et { color: rgba(16, 14, 13, .82); }

/* Folio: el número de página y el título corriente */
.folio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: .85rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--v2-linea);
}
.sobre-tinta .folio { border-bottom-color: var(--v2-linea-inv); }
.folio__num {
  font-family: var(--v2-titular);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.folio__tit { text-align: right; }

/* Filete: único separador del sistema */
.filete { border: 0; height: 1px; background: var(--v2-linea); margin: 0; }
.sobre-tinta .filete { background: var(--v2-linea-inv); }
.filete--grueso { height: 3px; background: var(--v2-tinta); }

/* ============================================================
   04. PORTADA
   El truco de la revista: el titular pasa por detrás de la
   modelo. Se logra apilando la misma foto dos veces con la
   tipografía en medio; el recorte, así, nunca se nota.
   ============================================================ */
.portada {
  position: relative;
  /* Descuenta la barra: si no, el pie del número queda fuera de pantalla.
     main.js afina el valor con la altura real. */
  min-height: calc(100svh - var(--v2-barra-h, 56px));
  overflow: hidden;
  background: #7C9FBC;
  isolation: isolate;
}
.portada__capa {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.portada__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* En vertical el encuadre centrado dejaba a la modelo fuera de cuadro.
     Las dos capas comparten esta regla, así que siguen alineadas. */
  object-position: 71% center;
}
.portada__capa--recorte { z-index: 3; pointer-events: none; }

.portada__masthead {
  position: absolute;
  left: 0; right: 0;
  top: clamp(2.6rem, 7vw, 5.5rem);
  z-index: 2;
  text-align: center;
  color: var(--v2-papel);
  padding-inline: var(--v2-marco);
  mix-blend-mode: normal;
}
.portada__masthead span { display: block; }

/* Líneas de portada, en los márgenes */
.portada__lineas {
  position: absolute;
  z-index: 4;
  bottom: clamp(5rem, 12vw, 8rem);
  left: var(--v2-marco);
  max-width: min(30ch, 42vw);
  color: var(--v2-papel);
}
.portada__linea { margin-bottom: 1.5rem; }
.portada__linea:last-child { margin-bottom: 0; }
.portada__linea a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--v2-curva);
}
.portada__linea a:hover { border-bottom-color: currentColor; }
.portada__linea .ed-titular--s { text-shadow: 0 1px 22px rgba(16, 14, 13, .5); }
.portada__linea .ed-pie { color: rgba(242, 238, 231, .82); text-shadow: 0 1px 14px rgba(16, 14, 13, .55); }

/* Cabecera del número, al pie de la portada */
.portada__pie {
  position: absolute;
  z-index: 4;
  left: var(--v2-marco);
  right: var(--v2-marco);
  bottom: clamp(1.4rem, 3vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(242, 238, 231, .38);
  color: var(--v2-papel);
}

/* Velo suave, sólo lo justo para sostener la tipografía */
.portada__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(16, 14, 13, .42) 0%, rgba(16, 14, 13, .04) 26%, rgba(16, 14, 13, 0) 46%),
    linear-gradient(0deg,  rgba(16, 14, 13, .62) 0%, rgba(16, 14, 13, .12) 34%, rgba(16, 14, 13, 0) 58%),
    linear-gradient(90deg, rgba(16, 14, 13, .46) 0%, rgba(16, 14, 13, 0) 52%);
}

/* ============================================================
   05. SUMARIO
   ============================================================ */
.sumario { list-style: none; margin: 0; padding: 0; }
.sumario__item { border-top: 1px solid var(--v2-linea); }
.sumario__item:last-child { border-bottom: 1px solid var(--v2-linea); }
.sumario__enlace {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(1rem, 1.8vw, 1.5rem);
  text-decoration: none;
  color: inherit;
  transition: color .35s var(--v2-curva), padding-left .45s var(--v2-curva);
}
.sumario__enlace:hover { color: var(--v2-rojo); padding-left: .6rem; }
.sumario__num {
  font-family: var(--v2-titular);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--v2-tinta-mut);
}
.sumario__enlace:hover .sumario__num { color: var(--v2-rojo); }
.sumario__pag { font-size: .68rem; letter-spacing: .18em; color: var(--v2-tinta-mut); }

/* ============================================================
   06. DOBLE PÁGINA EDITORIAL
   Imágenes que se salen del margen, pies minúsculos al lado.
   ============================================================ */
.doble { position: relative; }
.doble__figura { position: relative; margin: 0; overflow: hidden; }
.doble__figura img { width: 100%; height: auto; transition: transform 1.4s var(--v2-curva); }
.doble__figura:hover img { transform: scale(1.03); }

/* La imagen escapa por el borde de la página. En una sola columna la
   sangría deja la foto descentrada, así que sólo aplica en escritorio. */
.sangra-izq, .sangra-der { margin-inline: 0; }

.doble__pie {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  margin-top: .8rem;
}
.doble__pie .ed-rotulo { flex: 0 0 auto; }

/* Número grande de historia, detrás del titular */
.historia { position: relative; }
.historia__cifra {
  font-family: var(--v2-titular);
  font-weight: 600;
  font-size: clamp(5rem, 14vw, 13rem);
  line-height: .78;
  letter-spacing: -.05em;
  color: var(--v2-linea);
  margin: 0 0 -.28em;
  pointer-events: none;
  user-select: none;
}
.sobre-tinta .historia__cifra { color: rgba(242, 238, 231, .13); }
.historia__cuerpo { position: relative; }

/* Precio en la esquina, como el dato de un crédito */
.etiqueta-precio {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--v2-titular);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  letter-spacing: -.01em;
}
.etiqueta-precio small {
  font-family: var(--v2-texto);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--v2-tinta-mut);
}
.sobre-tinta .etiqueta-precio small { color: rgba(242, 238, 231, .6); }

/* ============================================================
   07. HOJA DE CONTACTOS
   La funda, presentada como tira de negativos numerada.
   ============================================================ */
.contactos {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 1px;
  border-block: 1px solid var(--v2-linea-inv);
  scrollbar-width: thin;
}
.contactos::-webkit-scrollbar { height: 2px; }
.contactos::-webkit-scrollbar-thumb { background: var(--v2-linea-inv); }

.negativo {
  flex: 0 0 auto;
  width: clamp(220px, 27vw, 400px);
  scroll-snap-align: start;
  border-right: 1px solid var(--v2-linea-inv);
  padding: clamp(.7rem, 1.1vw, 1.1rem);
}
.negativo__marco { position: relative; overflow: hidden; background: #1B1715; }
.negativo__marco img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.94);
  transition: transform 1.2s var(--v2-curva), filter .6s var(--v2-curva);
}
.negativo:hover .negativo__marco img { transform: scale(1.05); filter: saturate(1.06); }
.negativo__datos {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .7rem;
}
.negativo__num {
  font-family: var(--v2-titular);
  font-weight: 600;
  font-size: .8rem;
  color: var(--v2-oro);
}

/* ============================================================
   08. CRÉDITOS Y PRECIOS
   La tienda, presentada como la página de créditos.
   ============================================================ */
.creditos { list-style: none; margin: 0; padding: 0; }
/* La fila entera es el enlace, no sólo el título. */
.credito {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.7rem) 0;
  border-top: 1px solid var(--v2-linea);
  color: inherit;
  text-decoration: none;
  transition: padding .45s var(--v2-curva), background-color .35s var(--v2-curva);
}
.credito:hover,
.credito:focus-visible {
  background: rgba(16, 14, 13, .035);
  padding-inline: clamp(.5rem, 1vw, 1rem);
}
.credito:focus-visible { outline-offset: -2px; }
.creditos li:last-child .credito { border-bottom: 1px solid var(--v2-linea); }
.credito__mini {
  width: 84px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .6s var(--v2-curva);
}
.credito:hover .credito__mini,
.credito:focus-visible .credito__mini { filter: grayscale(0); }
.credito__cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.credito__nombre {
  font-family: var(--v2-titular);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0;
}
.credito:hover .credito__nombre,
.credito:focus-visible .credito__nombre { color: var(--v2-rojo); }
.credito__nombre { transition: color .35s var(--v2-curva); }
.credito__meta { width: 100%; }

/* ============================================================
   09. FEED
   ============================================================ */
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.tira__pieza { position: relative; display: block; overflow: hidden; background: var(--v2-papel-alt); }
.tira__pieza img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1.1s var(--v2-curva); }
.tira__pieza:hover img { transform: scale(1.06); }
.tira__pieza::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 14, 13, .38);
  opacity: 0;
  transition: opacity .4s var(--v2-curva);
}
.tira__pieza:hover::after { opacity: 1; }
@media (min-width: 768px) { .tira { grid-template-columns: repeat(6, 1fr); } }

/* ============================================================
   10. NAVEGACIÓN, BOTONES, FORMULARIOS, PIE
   ============================================================ */
/* Franja de tinta en todas las páginas. Antes era transparente sobre la
   portada y el texto, al ser color papel, desaparecía contra el fondo
   claro. En negro se lee siempre y además hace de lomo de la revista. */
.barra {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--v2-tinta);
  color: var(--v2-papel);
  border-bottom: 1px solid rgba(242, 238, 231, .14);
}
.barra a, .barra button { color: var(--v2-papel); }
.barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .95rem;
}
.barra__marca {
  font-family: var(--v2-titular);
  font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.barra__nav { display: none; gap: clamp(1rem, 2vw, 2rem); align-items: center; }
.barra__nav a {
  color: inherit;
  text-decoration: none;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--v2-curva);
}
.barra__nav a:hover, .barra__nav a.activo { border-bottom-color: currentColor; }
.barra__util { display: flex; align-items: center; gap: .9rem; }
.barra__boton {
  background: none;
  border: 0;
  padding: .3rem;
  color: inherit;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.barra__conteo {
  min-width: 17px; height: 17px;
  display: inline-grid; place-items: center;
  background: var(--v2-rojo);
  color: var(--v2-papel);
  font-size: .58rem;
  letter-spacing: 0;
  border-radius: 50%;
}

.btn-ed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1rem 2.2rem;
  border: 1px solid var(--v2-tinta);
  background: var(--v2-tinta);
  color: var(--v2-papel);
  font-family: var(--v2-texto);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background-color .4s var(--v2-curva), color .4s var(--v2-curva);
}
.btn-ed:hover, .btn-ed:focus-visible { background: transparent; color: var(--v2-tinta); }
.btn-ed--hueco { background: transparent; color: var(--v2-tinta); }
.btn-ed--hueco:hover, .btn-ed--hueco:focus-visible { background: var(--v2-tinta); color: var(--v2-papel); }
.btn-ed--claro { background: var(--v2-papel); border-color: var(--v2-papel); color: var(--v2-tinta); }
.btn-ed--claro:hover, .btn-ed--claro:focus-visible { background: transparent; color: var(--v2-papel); }
.btn-ed--rojo { background: var(--v2-rojo); border-color: var(--v2-rojo); }
.btn-ed--rojo:hover, .btn-ed--rojo:focus-visible { background: transparent; color: var(--v2-rojo); }
.btn-ed--bloque { width: 100%; }
.btn-ed[disabled] { opacity: .4; pointer-events: none; }

.enlace-ed {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: .35rem;
  transition: color .35s var(--v2-curva);
}
.enlace-ed:hover { color: var(--v2-rojo); }
.sobre-tinta .enlace-ed:hover { color: var(--v2-oro); }

/* Menú y bolsa */
.panel-ed { background: var(--v2-tinta); color: var(--v2-papel); border: 0; width: min(92vw, 420px); }
.panel-ed .offcanvas-header { padding: 1.3rem var(--v2-marco); border-bottom: 1px solid var(--v2-linea-inv); }
.panel-ed .offcanvas-body { padding: .5rem var(--v2-marco) 2.5rem; display: flex; flex-direction: column; }
.panel-ed .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .75; box-shadow: none; }
.panel-ed--papel { background: var(--v2-papel); color: var(--v2-tinta); }
.panel-ed--papel .offcanvas-header { border-bottom-color: var(--v2-linea); }
.panel-ed--papel .btn-close { filter: none; opacity: .5; }

.menu-ed { list-style: none; margin: 0; padding: 0; }
.menu-ed li { border-bottom: 1px solid var(--v2-linea-inv); }
.menu-ed a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--v2-titular);
  font-weight: 500;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.menu-ed a:hover { color: var(--v2-oro); }
.menu-ed span { font-family: var(--v2-texto); font-size: .6rem; letter-spacing: .2em; color: rgba(242, 238, 231, .55); }

.bolsa-lista { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.bolsa-item {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 1rem;
  padding-block: 1.2rem;
  border-bottom: 1px solid var(--v2-linea);
  align-items: start;
}
.bolsa-item img { width: 66px; aspect-ratio: 4/5; object-fit: cover; }
.bolsa-item h3 {
  font-family: var(--v2-titular);
  font-weight: 500;
  font-size: .95rem;
  text-transform: uppercase;
  margin: 0 0 .25rem;
  line-height: 1.15;
}
.bolsa-quitar {
  background: none; border: 0; padding: 0;
  color: var(--v2-tinta-mut);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.bolsa-quitar:hover { color: var(--v2-rojo); }
.bolsa-vacia { padding-block: 3.5rem; text-align: center; }
.bolsa-pie { padding-block: 1.4rem 2rem; border-top: 1px solid var(--v2-linea); }
.bolsa-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.2rem; }

/* Formularios */
.campo { margin-bottom: 1.5rem; }
.campo__et {
  display: block;
  margin-bottom: .5rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v2-tinta-mut);
}
.campo__in, .campo__sel, .campo__tx {
  width: 100%;
  padding: .85rem 0;
  border: 0;
  border-bottom: 1px solid var(--v2-linea);
  border-radius: 0;
  background: transparent;
  color: var(--v2-tinta);
  font-family: var(--v2-texto);
  font-size: .95rem;
  transition: border-color .4s var(--v2-curva);
}
.campo__tx { min-height: 130px; resize: vertical; }
.campo__in:focus, .campo__sel:focus, .campo__tx:focus { outline: none; border-bottom-color: var(--v2-tinta); }
.campo__err { display: none; margin-top: .4rem; font-size: .66rem; color: var(--v2-rojo); }
.campo.malo .campo__in, .campo.malo .campo__sel, .campo.malo .campo__tx { border-bottom-color: var(--v2-rojo); }
.campo.malo .campo__err { display: block; }
.marca-ed { display: flex; gap: .7rem; align-items: flex-start; }
.marca-ed input { width: 15px; height: 15px; margin-top: .3rem; accent-color: var(--v2-tinta); flex: 0 0 15px; }
.marca-ed label { font-size: .78rem; line-height: 1.55; color: var(--v2-tinta-sof); }
.aviso-ed {
  margin-top: 1rem;
  padding: .8rem 1.1rem;
  border-left: 3px solid var(--v2-rojo);
  background: rgba(163, 39, 50, .06);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.aviso-ed[hidden] { display: none; }
.fila-suscribe { display: flex; flex-direction: column; gap: 1rem; }

/* Cantidad y galería de ficha */
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--v2-linea); }
.cantidad button { width: 44px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; }
.cantidad button:hover { background: var(--v2-papel-alt); }
.cantidad span { width: 44px; text-align: center; font-size: .85rem; }

.galeria-ed__principal { background: var(--v2-papel-alt); overflow: hidden; aspect-ratio: 4/5; }
.galeria-ed__principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-ed__minis { display: flex; gap: 2px; margin-top: 2px; flex-wrap: wrap; }
.galeria-ed__mini {
  width: 74px; aspect-ratio: 4/5; padding: 0;
  border: 0; background: var(--v2-papel-alt);
  cursor: pointer; overflow: hidden; opacity: .55;
  transition: opacity .35s var(--v2-curva);
}
.galeria-ed__mini img { width: 100%; height: 100%; object-fit: cover; }
.galeria-ed__mini:hover, .galeria-ed__mini.activa { opacity: 1; }

/* Acordeón */
.acordeon-ed { --bs-accordion-border-color: var(--v2-linea); --bs-accordion-border-radius: 0; }
.acordeon-ed .accordion-item { background: transparent; border-inline: 0; border-top: 0; }
.acordeon-ed .accordion-button {
  background: transparent;
  padding: 1.25rem 0;
  font-family: var(--v2-texto);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v2-tinta);
  box-shadow: none;
}
.acordeon-ed .accordion-button:not(.collapsed) { color: var(--v2-rojo); }
.acordeon-ed .accordion-button::after { width: .8rem; height: .8rem; background-size: .8rem; filter: grayscale(1) opacity(.6); }
.acordeon-ed .accordion-body { padding: 0 0 1.5rem; font-size: .875rem; line-height: 1.8; color: var(--v2-tinta-sof); }
.acordeon-ed .accordion-body ul { padding-left: 1.1rem; margin: 0; }
.acordeon-ed .accordion-body li { margin-bottom: .35rem; }

/* Filtros de colección */
.filtros-ed {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding-block: 1rem;
  border-block: 1px solid var(--v2-linea);
}
.filtro-ed {
  background: none; border: 0;
  padding: .5rem 1rem;
  color: var(--v2-tinta-mut);
  font-family: var(--v2-texto);
  font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--v2-curva);
}
.filtro-ed:hover { color: var(--v2-tinta); }
.filtro-ed.activo { color: var(--v2-papel); background: var(--v2-tinta); }
.conteo-ed { margin-left: auto; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--v2-tinta-mut); }

/* Pie: colofón */
.colofon { background: var(--v2-tinta); color: var(--v2-papel); }
/* El colofón es oscuro sin llevar .sobre-tinta: necesita su propia tinta. */
.colofon .ed-texto { color: rgba(242, 238, 231, .74); }
.colofon .ed-pie { color: rgba(242, 238, 231, .6); }
.colofon__alto { padding-block: clamp(3rem, 5.5vw, 5rem); }
.colofon__marca {
  font-family: var(--v2-titular);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}
.colofon h2 { font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--v2-oro); margin: 0 0 1.1rem; }
.colofon ul { list-style: none; margin: 0; padding: 0; }
.colofon li { margin-bottom: .6rem; }
.colofon a { color: rgba(242, 238, 231, .78); text-decoration: none; font-size: .82rem; }
.colofon a:hover { color: var(--v2-oro); }
.colofon__bajo {
  border-top: 1px solid var(--v2-linea-inv);
  padding-block: 1.4rem;
  font-size: .62rem;
  letter-spacing: .14em;
  color: rgba(242, 238, 231, .62);
}
.colofon__bajo a { color: inherit; font-size: inherit; }

/* ============================================================
   11. MOVIMIENTO Y ACCESIBILIDAD
   ============================================================ */
.aparece {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .95s var(--v2-curva), transform .95s var(--v2-curva);
}
.aparece.visible { opacity: 1; transform: none; }
.aparece--d1 { transition-delay: .1s; }
.aparece--d2 { transition-delay: .2s; }
.aparece--d3 { transition-delay: .3s; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--v2-rojo);
  outline-offset: 3px;
}
.salto {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--v2-tinta); color: var(--v2-papel);
  padding: .8rem 1.3rem; font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none;
  transition: top .3s var(--v2-curva);
}
.salto:focus { top: 1rem; }
.oculto-visual {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   PUNTOS DE QUIEBRE
   ============================================================ */
@media (min-width: 576px) {
  .fila-suscribe { flex-direction: row; align-items: flex-end; }
  .fila-suscribe .campo { flex: 1 1 auto; margin-bottom: 0; }
}
@media (min-width: 992px) {
  .portada__capa img { object-position: center center; }
  .sangra-izq { margin-left: calc(-1 * var(--v2-marco)); }
  .sangra-der { margin-right: calc(-1 * var(--v2-marco)); }
  .barra__nav { display: flex; }
  .barra__boton--menu { display: none; }
  .credito { grid-template-columns: 104px 1fr; }
  .credito__mini { width: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .barra, .colofon, .btn-ed { display: none !important; }
  body { background: #fff; color: #000; }
}