/*
 * Vitrina de la portada — [ccm_tienda_vitrina].
 *
 * PORTADO de docs/ideas/maquetas/vitrina.css (la especificación). Regla a regla,
 * con dos cambios y nada más:
 *   1. Todo va bajo .ccmts-vitrina. La maqueta era una página sola; aquí convive
 *      con el tema y con Elementor, que tienen sus propios h2, a, p e img. El
 *      prefijo suma lo mismo a todas las reglas, así que el orden de
 *      especificidad entre ellas (trampa 6: «.pieza--cifra-marca .cifra» contra
 *      «.cifra» de cada forma) queda igual que en la maqueta.
 *   2. Lo que en la maqueta era de <body> (fondo negro, tipografía, color) pasa
 *      al envoltorio .ccmts-vitrina.
 *
 * Fuentes: van en assets/fonts, latin y en woff2 (SIL OFL). Ver la cabecera de
 * ese bloque.
 */

/* ---------- fuentes ----------
 * TODO el texto va en «founder grotesk CCM», la tipografía del sitio, que carga el
 * tema en todas las páginas (300–700; 700 es su peso más alto). Decisión del dueño,
 * 10-oct: también la etiqueta, la ficha y la cifra. Antes iban en Red Hat Mono 500
 * y Big Shoulders Display 900, autoalojadas (23.932 bytes); ya no se carga ninguna
 * fuente propia. La cifra, que es ancha en founder y estrecha en Big Shoulders, se
 * ajusta con la matriz (tests/js/vitrina-matriz.mjs). */

.ccmts-vitrina{
  --noche:#0f0e0e;      /* fondo de la sección: un punto más hondo que el negro de la marca */
  --papel:#ffffff;      /* las cards */
  --rojo:#E60000;       /* --e-global-color-primary */
  --tinta:#191818;      /* --e-global-color-secondary */
  --humo:#6f6a69;       /* texto secundario */
  --gris-claro:#b7b1b0; /* notas sobre negro */
  --fuente:"founder grotesk CCM","Founders Grotesk","Helvetica Neue",Arial,sans-serif;
  font-family:var(--fuente);color:#fff;-webkit-font-smoothing:antialiased;
  /* 100vw y no 100 %: en móvil Elementor pone su contenedor en flex-wrap:wrap y
     mide la altura del hijo con su ancho INTRÍNSECO. Con container queries ese
     ancho es 0, 100cqi vale 0, las filas del mosaico salen a cero y el
     contenedor se queda en 307 px de 1037: «Otras categorías» se pinta encima.
     Medido en dev a 375 px el 9-oct. max-width lo devuelve al ancho real. */
  width:100vw;max-width:100%;
}
.ccmts-vitrina,.ccmts-vitrina *,.ccmts-vitrina *::before,.ccmts-vitrina *::after{box-sizing:border-box}
.ccmts-vitrina *{margin:0}

/* ---------- sección, caja y cabecera ----------
 * Segunda corrección del dueño (9-oct): el título va DENTRO de la caja negra, en
 * blanco, con la talla, el grosor, la familia y la x de los títulos de los
 * carruseles vecinos («Novedades»), y el mosaico alineado con él.
 *
 * Valores copiados de ccm-gallery 1.2.0, assets/ccmg-carousel.css
 * (.ccmg-carousel__header, __title y __header-cta, con sus variables: título
 * clamp(20px,1.45vw,24px)/500, 18 px hasta 1023, 16 px hasta 599; enlace
 * clamp(14px,1.05vw,16px)/500, 15 y 14 px), del ancho máximo de su carcasa (1520 px)
 * y del ajuste de Elementor de esos carruseles en la página 42
 * (--ccmg-track-edge-padding: 48 px, 10 px hasta 767). El enlace va en BLANCO con la
 * flecha en rojo: el rojo #E60000 sobre este negro da 3,9:1, por debajo del 4,5:1 que
 * pide un texto de 14 px.
 *
 * Espacios medidos en la portada:
 *   borde superior de la caja → título = lo que hay sobre «Novedades» + 8 px (pedido del
 *     dueño, 10-oct): 32 px (16 en móvil)
 *   título → mosaico = título → tarjetas del carrusel: 14 px
 *   caja → título de la sección siguiente = final de las tarjetas de un carrusel →
 *     título siguiente: 62 px (28 en móvil). «Otras categorías» ya trae 10 (8) por
 *     dentro, así que la sección deja 52 (20) debajo. Va en la SECCIÓN, no en el
 *     contenedor de Elementor: vacía, mide 0.
 * tests/js/vitrina-cabecera.mjs lo compara con «Novedades» en la portada servida. */
.ccmts-vitrina .vitrina{padding-bottom:52px}
.ccmts-vitrina .vitrina__caja{background:var(--noche)}
.ccmts-vitrina .vitrina__marco{
  container:vitrina / inline-size;box-sizing:border-box;
  max-width:1520px;margin:0 auto;padding:32px 48px 24px;
}
.ccmts-vitrina .vitrina__cabecera{
  box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  width:100%;margin:0 0 14px;
}
.ccmts-vitrina .vitrina__titulo{
  all:unset;display:block;flex:1 1 auto;min-width:0;
  font-family:var(--fuente);font-size:clamp(20px,1.45vw,24px);font-weight:500;color:#fff;line-height:1.2;
}
.ccmts-vitrina .vitrina__todo{
  display:inline-flex;align-items:center;gap:6px;padding-block:4px;
  /* el padding da área táctil, pero no puede agrandar la línea: en móvil el enlace
     (14 + 4 + 4 = 22 px) es más alto que el título (16 × 1,2) y lo bajaba 1,41 px
     respecto a «Novedades». Medido el 9-oct. */
  margin-block:-4px;
  color:#fff;font-family:var(--fuente);font-size:clamp(14px,1.05vw,16px);font-weight:500;line-height:1;
  text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.08em;white-space:nowrap;
  transition:color .18s ease;-webkit-tap-highlight-color:transparent;
}
.ccmts-vitrina .vitrina__todo:hover,.ccmts-vitrina .vitrina__todo:focus{color:#fff;text-decoration-thickness:.14em}
.ccmts-vitrina .vitrina__todo:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
.ccmts-vitrina .vitrina__todo-texto{display:block;line-height:1}
.ccmts-vitrina .vitrina__todo-icono{display:inline-flex;align-items:center;justify-content:center;width:6px;height:12px;flex-shrink:0;color:var(--rojo);transition:transform .18s ease}
.ccmts-vitrina .vitrina__todo-icono svg{display:block;width:100%;height:100%}
.ccmts-vitrina .vitrina__todo:hover .vitrina__todo-icono,.ccmts-vitrina .vitrina__todo:focus-visible .vitrina__todo-icono{transform:translateX(1px)}
@media (max-width:1023px){
  .ccmts-vitrina .vitrina__titulo{font-size:18px}
  .ccmts-vitrina .vitrina__todo{font-size:15px}
}
@media (max-width:767px){
  .ccmts-vitrina .vitrina{padding-bottom:20px}
  .ccmts-vitrina .vitrina__marco{padding:16px 10px 10px}
}
@media (max-width:599px){
  .ccmts-vitrina .vitrina__titulo{font-size:16px}
  .ccmts-vitrina .vitrina__todo{font-size:14px}
}

/* ---------- el mosaico: los huecos son fijos, el producto cambia ---------- */
.ccmts-vitrina .mosaico{
  --gap:14px;
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:calc((100cqi - 3 * var(--gap)) / 4);   /* filas = ancho de columna: cuadrados reales */
  grid-template-areas:
    "a a b c"
    "f f b d"
    "e g g g";
}
@container vitrina (max-width: 640px){
  .ccmts-vitrina .mosaico{
    --gap:10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:calc((100cqi - var(--gap)) / 2);
    grid-template-areas:
      "a a"
      "b c"
      "b d"
      "e f"
      "g g";
  }
}

/* ---------- la pieza: se reacomoda sola según la FORMA de su hueco ---------- */
.ccmts-vitrina .pieza{
  container:pieza / size;
  position:relative;display:block;overflow:hidden;isolation:isolate;
  background:var(--papel);border-radius:4px;
  color:var(--tinta);text-decoration:none;
}
.ccmts-vitrina .pieza:hover,.ccmts-vitrina .pieza:focus{color:var(--tinta);text-decoration:none}
.ccmts-vitrina .pieza:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ccmts-vitrina .lienzo{
  /* --etq es el tamaño de letra de la etiqueta en cada forma; --etq-fin, su borde
     inferior (padding 6.5 + línea 1.2·etq + relleno 2·1.5). La cifra-marca nunca
     empieza por encima de esa línea (regla de colocación del §4). */
  --etq:3.5cqmin;
  --etq-fin:calc(6.5cqmin + var(--etq) * 1.2 + 3cqmin);
  /* --k escala TODAS las tallas de la cifra. Las de la maqueta (k = 1) son para Big
     Shoulders, una letra estrecha; founder grotesk es mucho más ancha (10-oct). */
  --k:.72;
  position:absolute;inset:0;padding:6.5cqmin;
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"k" "c" "f" "t";
}

.ccmts-vitrina .etiqueta{
  grid-area:k;justify-self:start;align-self:start;position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:1.5cqmin;
  font-family:var(--fuente);font-weight:500;font-size:var(--etq);letter-spacing:.05em;text-transform:uppercase;line-height:1.2;
  background:var(--tinta);color:#fff;padding:1.5cqmin 2.8cqmin;border-radius:99px;
}
.ccmts-vitrina .etiqueta::before{content:"";width:1.5cqmin;height:1.5cqmin;border-radius:50%;background:var(--rojo)}

/* el sello: la cifra que define al producto, que puede pasar por DETRÁS de él.
   Regla de legibilidad (mentora, 10-oct): cada carácter conserva al menos el 50 % de
   su tinta visible. La cifra ocupa SU espacio (la fila «c», entre la etiqueta y la
   foto) y solo se mete detrás del producto por su borde inferior: margin-bottom -.4em
   sube la foto un 40 % de la cifra, así que aunque el producto llegue al borde de su
   área a cada carácter le queda más de la mitad a la vista. Antes iba absoluta arriba
   a la derecha, encima del área de la foto, y con el encuadre el producto tapaba
   dígitos enteros. Portado de la maqueta. */
.ccmts-vitrina .cifra{
  position:relative;z-index:0;pointer-events:none;user-select:none;
  grid-area:c;justify-self:end;
  font-family:var(--fuente);font-weight:700;
  color:var(--rojo);line-height:1;letter-spacing:-.01em;white-space:nowrap;
  font-size:min(calc(110cqmin * var(--k) / var(--len)), calc(34cqmin * var(--k)));
  margin:1cqmin 0 -.4em;
}
/* cuando la cifra ES la marca, es la única identidad de la pieza: nunca sangra ni se tapa.
   Nunca empieza por encima del borde inferior de la etiqueta, nunca va detrás del
   producto y, si no cabe, se encoge por --len con min(): nunca se recorta.
   En la CUADRADA (y en la VERTICAL, abajo) eso solo cabe dándole su propia fila «c»
   entre la etiqueta y la foto: la foto se encoge para dejarle sitio. Antes iba
   absoluta arriba a la derecha (top:6cqmin) y «BOSE» salía «ROSE» bajo «CABINAS
   ACTIVAS»; bajarla sin más la metía detrás de la foto («OSE»). Matriz del 9-oct
   (tests/js/vitrina-matriz.mjs). Portado de la maqueta, regla a regla. */
.ccmts-vitrina .pieza--cifra-marca .lienzo{grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"k" "c" "f" "t"}
.ccmts-vitrina .pieza--cifra-marca .cifra{line-height:1;position:relative;grid-area:c;justify-self:start;top:auto;right:auto;margin:2.5cqmin 0 2cqmin;font-size:min(calc(80cqmin * var(--k) / var(--len)), calc(30cqmin * var(--k)))}
.ccmts-vitrina .pieza--cifra-tinta .cifra{color:var(--tinta)}
/* la foto se recorta sola: el filtro vuelve transparente su fondo blanco, así
   el producto TAPA la cifra en vez de teñirse; la sombra sigue su silueta.

   Regla de colocación 3 (dueño, 10-oct), portada de la maqueta: la foto se ENCUADRA
   por la caja del producto (--ex --ey --ew --eh, fracciones de la foto, del `encuadre`
   del §7.2 v2; las pone el renderer) con un margen fijo del 6 % (--em) y centrada.
   --ar es la proporción de la foto (de la biblioteca de medios). El ancho (--D) es el
   menor de: la caja llena el ancho del área, la caja llena el alto, o 2,5 veces el
   encaje entero (tope de aumento). El marco recorta lo que sobra (blanco ya vuelto
   transparente); el producto nunca, porque su caja cabe con margen. Sin encuadre:
   0, 0, 1, 1 y margen 0, el encaje entero de siempre. */
.ccmts-vitrina .pieza{--ar:1;--ex:0;--ey:0;--ew:1;--eh:1;--em:0}
.ccmts-vitrina .pieza--encuadrada{--em:.06}
.ccmts-vitrina .marco-foto{
  grid-area:f;position:relative;z-index:1;min-width:0;min-height:0;display:block;
  container:foto / size;overflow:hidden;
  --D:min(calc((1 - 2 * var(--em)) * 100cqw / var(--ew)),
          calc((1 - 2 * var(--em)) * 100cqh * var(--ar) / var(--eh)),
          calc(2.5 * min(100cqw, 100cqh * var(--ar))));
}
.ccmts-vitrina .foto{
  position:absolute;left:50%;top:50%;width:var(--D);height:auto;max-width:none;max-height:none;
  border:0;border-radius:0;box-shadow:none;
  transform:translate(calc(-100% * (var(--ex) + var(--ew) / 2)), calc(-100% * (var(--ey) + var(--eh) / 2)));
  transform-origin:calc(100% * (var(--ex) + var(--ew) / 2)) calc(100% * (var(--ey) + var(--eh) / 2));
  filter:url(#ccmts-vitrina-sin-fondo) drop-shadow(0 1.4cqmin 2.2cqmin rgba(25,24,24,.24));
  transition:scale .6s cubic-bezier(.2,.7,.2,1);
}
/* crece alrededor del centro del PRODUCTO: con el 6 % de margen, un 4,5 % más cabe */
.ccmts-vitrina .pieza:hover .foto{scale:1.045}

.ccmts-vitrina .texto{grid-area:t;position:relative;z-index:2;display:grid;gap:1.1cqmin}
.ccmts-vitrina .marca{font-weight:700;font-size:7cqmin;letter-spacing:-.015em;line-height:1;color:var(--rojo)}
.ccmts-vitrina .pieza--cifra-marca .marca{display:none}   /* si la cifra ya es la marca, no se repite */
.ccmts-vitrina .nombre{
  font-weight:600;font-size:4.1cqmin;line-height:1.2;color:var(--tinta);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.ccmts-vitrina .ficha{font-family:var(--fuente);font-weight:500;font-size:3.2cqmin;color:var(--humo);letter-spacing:.02em;line-height:1.3}
.ccmts-vitrina .precio{font-weight:700;font-size:8.6cqmin;line-height:1;letter-spacing:-.025em;color:var(--rojo);font-variant-numeric:tabular-nums;margin-top:.8cqmin}
/* wc_price() envuelve en <span class="woocommerce-Price-amount"><bdi>…: que herede todo */
.ccmts-vitrina .precio *{font:inherit;color:inherit;letter-spacing:inherit}

/* ---- ANCHA ---- */
@container pieza (min-aspect-ratio: 7/5) and (max-aspect-ratio: 13/5){
  .ccmts-vitrina .lienzo{--etq:4.2cqmin;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"k f" "c f" "t f"}
  /* la cifra, en el hueco libre de la columna de texto (entre la etiqueta y la marca),
     y la foto conserva su columna entera. Tope de 30 cqmin: es lo que cabe en ese hueco
     con el nombre en dos líneas y ficha. Antes iba abajo a la derecha, detrás de la foto,
     y con la torre BOSE F1 del «12″» solo se veía la comilla (10-oct). */
  .ccmts-vitrina .cifra{justify-self:start;align-self:end;margin:0 0 1.5cqmin;font-size:min(calc(150cqmin * var(--k) / var(--len)), calc(30cqmin * var(--k)))}
  /* la marca como cifra va en el hueco libre de la columna de texto, nunca detrás de la foto */
  .ccmts-vitrina .pieza--cifra-marca .lienzo{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"k f" ". f" "t f"}
  .ccmts-vitrina .pieza--cifra-marca .cifra{position:absolute;grid-area:auto;margin:0;font-size:min(calc(168cqmin * var(--k) / var(--len)), calc(54cqmin * var(--k)));left:6.5cqmin;top:calc(var(--etq-fin) + 4cqmin);right:auto;bottom:auto}
  .ccmts-vitrina .marca{font-size:9.5cqmin}
  .ccmts-vitrina .nombre{font-size:5.2cqmin}
  .ccmts-vitrina .ficha{font-size:4.1cqmin}
  .ccmts-vitrina .precio{font-size:11.5cqmin}
}
/* ---- VERTICAL ---- */
@container pieza (max-aspect-ratio: 3/4){
  /* En la vertical TODA cifra va en su fila «c», entre la etiqueta y la foto, y en
     horizontal (10-oct). Tumbada contra el borde izquierdo quedaba detrás del producto:
     con la foto encuadrada, del «12″» solo asomaban trozos y parecía una «N». Portado
     de la maqueta. */
  .ccmts-vitrina .lienzo,.ccmts-vitrina .pieza--cifra-marca .lienzo{--etq:4.4cqmin;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"k" "c" "f" "t"}
  .ccmts-vitrina .cifra,.ccmts-vitrina .pieza--cifra-marca .cifra{
    position:relative;grid-area:c;justify-self:start;
    writing-mode:horizontal-tb;transform:none;left:auto;right:auto;top:auto;bottom:auto;
    line-height:1;margin:2.5cqmin 0 2cqmin;
    font-size:min(calc(170cqmin * var(--k) / var(--len)), calc(56cqmin * var(--k)));
  }
  .ccmts-vitrina .marca{font-size:9.5cqmin}
  .ccmts-vitrina .nombre{font-size:5.6cqmin;-webkit-line-clamp:3}
  .ccmts-vitrina .ficha{font-size:4.4cqmin}
  .ccmts-vitrina .precio{font-size:11.5cqmin}
}
/* ---- FRANJA ---- */
@container pieza (min-aspect-ratio: 13/5){
  .ccmts-vitrina .lienzo{--etq:4.4cqmin;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"k f t" ". f t"}
  .ccmts-vitrina .cifra,.ccmts-vitrina .pieza--cifra-marca .cifra{position:absolute;grid-area:auto;margin:0;line-height:.8;font-size:calc(210cqmin * var(--k) / var(--len));left:6cqmin;right:auto;top:auto;bottom:4cqmin}
  /* tope: con una marca de 1-2 letras la cifra subiría hasta la etiqueta */
  .ccmts-vitrina .pieza--cifra-marca .lienzo{grid-template-rows:auto minmax(0,1fr);grid-template-areas:"k f t" ". f t"}
  .ccmts-vitrina .pieza--cifra-marca .cifra{position:absolute;grid-area:auto;margin:0;font-size:min(calc(210cqmin * var(--k) / var(--len)), calc(86cqmin * var(--k)))}
  .ccmts-vitrina .texto{align-self:center}
  .ccmts-vitrina .marca{font-size:10cqmin}
  .ccmts-vitrina .nombre{font-size:5.4cqmin;-webkit-line-clamp:3}
  .ccmts-vitrina .ficha{font-size:4.2cqmin}
  .ccmts-vitrina .precio{font-size:12cqmin}
}

@media (prefers-reduced-motion: reduce){
  .ccmts-vitrina .foto{transition:none}
  .ccmts-vitrina .pieza:hover .foto{scale:none}
}