/**
* ccmts-articulos.css — la entrada del blog con el diseño aprobado (23-sep).
*
* Fuente: las dos maquetas aprobadas por el dueño, `docs/blog/plantillas/
* plantilla-guia.html` y `plantilla-comparacion.html` (repo ccm-ia-n8n-chatwoot).
* El marcado que estiliza está en `docs/blog/CONTRATO-MARCADO.md`.
*
* Dos capas:
* .ccmts-blog__* lo de PÁGINA (hero, fila de acción, lateral, fader, cierre),
* que pinta CCMTS_Blog_Pagina alrededor del contenido.
* .ccmts-art__* lo del ARTÍCULO, que viene en el post_content (n8n).
*
* Reglas de la casa que se respetan aquí:
* - Todo va colgado de .ccmts-blog / .ccmts-art: esta hoja solo se carga en
* una entrada individual del blog, pero aun así no toca nada del tema.
* - Tipografía: la que YA carga la web. Medido el 23-sep: `founder grotesk
* CCM` (300–700) sí; «Red Hat Display» NO se carga — el de Google
* Fonts del tema está roto (`https://fonts.googleapis.com&display=swap/css2…`,
* sin `?`, apunta a un host inexistente). Así que los títulos y el texto van
* en Founders Grotesk y los datos en la mono del sistema. Cero fuentes nuevas.
* - Nada de lo que se ve depende de JS salvo el fader (decoración) y el
* precio (que es del endpoint en vivo).
* - `prefers-reduced-motion`: sin transiciones ni scroll suave.
*
* Mantiene, restilizadas, las clases del marcado v2 de n8n (`ccmts-art__producto`,
* `__specs`, `__recomendados`…): los borradores que ya existan no se rompen.
*/
/* ── Tokens ──────────────────────────────────────────────────────────── */
.ccmts-blog,
.ccmts-art,
.ccmts-art__recomendados {
--ccmts-tinta: #191818;
--ccmts-rojo: #E60000;
--ccmts-papel: #FFFFFF;
--ccmts-aluminio: #F2F2F0;
--ccmts-niebla: #F7F7F5;
--ccmts-grafito: #646464;
--ccmts-linea: #E7E7E7;
--ccmts-senal: #1F7A4D;
--ccmts-display: "founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Arial, sans-serif;
--ccmts-texto: "founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Arial, sans-serif;
--ccmts-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
/* Altura de la cabecera pegajosa de la tienda (compacta, medida en dev). */
--ccmts-cabecera: 96px;
--ccmts-col: 700px;
/* Esquina de todo lo rectangular del artículo (pedido del dueño, 23-sep).
* Lo que ya es redondo (píldoras, corazón, puntos de estado, perilla) y las
* rayas NO lo usan. */
--ccmts-radio: 4px;
/* La imagen del hero, que es grande y flota (pedido del dueño, 24-sep). */
--ccmts-radio-hero: 16px;
--ccmts-radio-hero-movil: 12px;
}
/* ── Los contenedores de la plantilla #12734 ──────────────────────────
* El exterior trae 80 px de relleno arriba (y 0 a los lados) y el interior los
* 10 px por defecto de Elementor. Se quitan SOLO en los contenedores que llevan
* una entrada con el diseño: el hero va pegado a la cabecera, como en la
* maqueta, y el margen lateral lo pone .ccmts-blog (16 px en el móvil). Si
* mañana se rehace la plantilla, esta regla deja de casar y vuelve el hueco:
* feo, no roto. (`.e-con.e-con` sube la especificidad por encima de la regla
* por elemento de Elementor, `.elementor-12734 .elementor-element.elementor-element-…`.) */
body .e-con.e-con:has( .ccmts-blog ) {
--padding-top: 0px;
--padding-left: 0px;
--padding-right: 0px;
}
/* ── Fuera los dos bloques de la tienda bajo el artículo ─────────────────
* «¿Por qué elegirnos?» (98c4327) e «Instagram» (b871279, con el shortcode
* sin pintar), hijos de la plantilla #12734. Solo en una entrada con el diseño:
* la clase del la pone CCMTS_Blog_Pagina::clases_body() cuando el
* contenido lleva el sello. Por qué CSS y no quitarlos en el servidor: ver la
* cabecera de esa clase (la caché de elementos de Elementor se salta el filtro).
* Si se rehace #12734 los ids cambian y los bloques vuelven: feo, no roto. */
body.ccmts-blog-con-diseno .elementor-12734 .elementor-element-98c4327,
body.ccmts-blog-con-diseno .elementor-12734 .elementor-element-b871279 {
display: none;
}
/* ── Página: base ───────────────────────────────────────────────────── */
.ccmts-blog {
color: var( --ccmts-tinta );
font: 400 17px/1.65 var( --ccmts-texto );
-webkit-font-smoothing: antialiased;
padding-inline: 16px;
}
@media ( min-width: 1200px ) {
.ccmts-blog {
padding-inline: 0;
}
}
.ccmts-blog *,
.ccmts-blog *::before,
.ccmts-blog *::after {
box-sizing: border-box;
}
/* El reset de Hello Elementor pinta los enlaces de #c36. */
.ccmts-blog a,
.ccmts-blog a:hover,
.ccmts-blog a:active {
color: inherit;
}
.ccmts-blog :focus-visible {
outline: 2px solid var( --ccmts-rojo );
outline-offset: 3px;
border-radius: var( --ccmts-radio );
}
.ccmts-blog img {
max-width: 100%;
height: auto;
}
.ccmts-blog p {
margin: 0 0 1.1em;
text-wrap: pretty;
}
@media ( prefers-reduced-motion: no-preference ) {
html:has( .ccmts-blog ) {
scroll-behavior: smooth;
}
}
/* ── Hero (Recomendación / Guía por uso) ────────────────────────────── */
.ccmts-blog__hero {
position: relative;
background: var( --ccmts-aluminio );
/* El fondo a sangre sin salirse del contenedor: el border-image rellena
hasta los bordes de la ventana y NO crea scroll horizontal (es tinta
que desborda, no caja). El degradado de abajo es el «suelo» de la
maqueta: la foto de estudio apoyada. */
border-image: linear-gradient( to top, #E6E6E4, var( --ccmts-aluminio ) 18% ) fill 0 / / 0 100vw;
margin-inline: -16px;
padding-inline: 16px;
}
@media ( min-width: 1200px ) {
.ccmts-blog__hero {
margin-inline: 0;
padding-inline: 0;
}
}
.ccmts-blog__hero-in {
padding-top: clamp( 40px, 6vw, 72px );
display: grid;
gap: 12px;
text-align: center;
}
.ccmts-blog p.ccmts-blog__antetitulo {
font: 500 12px/1.2 var( --ccmts-mono );
letter-spacing: .08em;
text-transform: uppercase;
color: var( --ccmts-grafito );
margin: 0;
}
.ccmts-blog__antetitulo b {
color: var( --ccmts-rojo );
font-weight: 500;
}
.ccmts-blog h1.ccmts-blog__titulo {
font: 700 clamp( 34px, 5.4vw, 64px )/1.02 var( --ccmts-display );
letter-spacing: -.035em;
margin: 6px auto 0;
max-width: 14ch;
color: var( --ccmts-tinta );
text-wrap: balance;
}
.ccmts-blog p.ccmts-blog__lede {
max-width: 52ch;
margin: 14px auto 0;
color: #3a3a3a;
font-size: clamp( 17px, 1.6vw, 19px );
}
.ccmts-blog__escena {
position: relative;
height: clamp( 240px, 34vw, 420px );
margin-top: 28px;
}
.ccmts-blog .ccmts-blog__escena img {
position: absolute;
bottom: 0;
width: auto;
max-width: 46%;
object-fit: contain;
mix-blend-mode: multiply;
filter: saturate( .95 );
}
.ccmts-blog .ccmts-blog__escena-a { left: 6%; height: 62%; }
.ccmts-blog .ccmts-blog__escena-b { left: 50%; transform: translateX( -50% ); height: 100%; z-index: 2; }
.ccmts-blog .ccmts-blog__escena-c { right: 6%; height: 72%; }
/* ── 1.14.2 / 1.14.3: el hero con la imagen destacada (en lugar de la escena)
* 1.14.2: recortada (nunca deformada) a 3:2 en el móvil y 16:9 en escritorio.
* 1.14.3 (pedido del dueño: «border radius y que parezca flotante»): esquina
* propia (--ccmts-radio-hero, 16 px; 12 px en el móvil), sombra en capas, y la
* imagen MONTA sobre el borde inferior del gris: el fondo termina al 65 % de su
* altura y el 35 % restante cae sobre el blanco del cuerpo.
*
* Cómo se monta sin medir en JS: el margen inferior negativo de la figura sale
* en % del ANCHO del bloque (así funcionan los márgenes en %), y la altura de la
* imagen es ancho × proporción. Solape = min(100 %, 1080 px) × proporción × .35.
* La fila de acción (hermana siguiente) recupera ese mismo solape como margen
* superior —su bloque contenedor tiene el mismo ancho que el del hero— más aire,
* así que nunca queda tapada. Sin destacada no se pinta nada de esto. */
.ccmts-blog__hero--portada {
/* Gris liso: el «suelo» degradado era para las fotos recortadas de la escena. */
border-image: linear-gradient( var( --ccmts-aluminio ), var( --ccmts-aluminio ) ) fill 0 / / 0 100vw;
--ccmts-hero-prop: .6667; /* 3:2 */
--ccmts-hero-ancho: min( 100%, 1080px );
--ccmts-hero-solape: calc( var( --ccmts-hero-ancho ) * var( --ccmts-hero-prop ) * .35 );
}
.ccmts-blog__portada {
position: relative;
z-index: 1;
justify-self: center;
width: var( --ccmts-hero-ancho, 100% );
margin: 28px 0 calc( -1 * var( --ccmts-hero-solape, 0px ) );
aspect-ratio: 3 / 2;
border-radius: var( --ccmts-radio-hero-movil );
overflow: hidden;
background: #E6E6E4;
box-shadow: 0 30px 60px -20px rgba( 25, 24, 24, .35 ), 0 12px 24px -8px rgba( 25, 24, 24, .12 );
}
@media ( min-width: 761px ) {
.ccmts-blog__hero--portada {
--ccmts-hero-prop: .5625; /* 16:9 */
}
.ccmts-blog__portada {
aspect-ratio: 16 / 9;
border-radius: var( --ccmts-radio-hero );
}
}
.ccmts-blog .ccmts-blog__portada img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 50%;
}
.ccmts-blog__hero--portada .ccmts-blog__hero-in {
padding-bottom: 0;
}
/* La fila de acción baja lo que la imagen sobresale, más aire para la sombra. */
.ccmts-blog__hero--portada + .ccmts-blog__accion {
margin-top: calc( min( 100%, 1080px ) * .6667 * .35 + 28px );
}
@media ( min-width: 761px ) {
.ccmts-blog__hero--portada + .ccmts-blog__accion {
margin-top: calc( min( 100%, 1080px ) * .5625 * .35 + 36px );
}
}
/* Leve elevación al pasar el ratón: solo con ratón real y sin «reducir movimiento». */
@media ( hover: hover ) and ( pointer: fine ) and ( prefers-reduced-motion: no-preference ) {
.ccmts-blog__portada {
transition: transform .25s ease, box-shadow .25s ease;
}
.ccmts-blog__portada:hover {
transform: translateY( -2px );
box-shadow: 0 34px 64px -20px rgba( 25, 24, 24, .38 ), 0 14px 26px -8px rgba( 25, 24, 24, .14 );
}
}
/* ── Fila de acción: meta + compartir | dos botones ──────────────────── */
.ccmts-blog__accion {
padding: 18px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
border-bottom: 1px solid var( --ccmts-linea );
}
.ccmts-blog__meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
font: 400 13px/1 var( --ccmts-mono );
color: var( --ccmts-grafito );
}
.ccmts-blog__share {
display: flex;
gap: 6px;
}
.ccmts-blog .ccmts-blog__share a,
.ccmts-blog button.ccmts-blog__copiar {
all: unset;
box-sizing: border-box;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
color: var( --ccmts-grafito );
cursor: pointer;
}
.ccmts-blog button.ccmts-blog__copiar[hidden] {
display: none;
}
.ccmts-blog .ccmts-blog__share a:hover,
.ccmts-blog button.ccmts-blog__copiar:hover,
.ccmts-blog button.ccmts-blog__copiar[data-copiado] {
background: var( --ccmts-aluminio );
color: var( --ccmts-tinta );
}
.ccmts-blog__share svg {
width: 16px;
height: 16px;
}
.ccmts-blog__ctas {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.ccmts-blog a.ccmts-blog__btn {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
font: 500 14px/1 var( --ccmts-texto );
padding: 13px 18px;
border: 1px solid var( --ccmts-tinta );
border-radius: var( --ccmts-radio );
min-height: 44px;
color: var( --ccmts-tinta );
background: transparent;
transition: background .15s, border-color .15s, color .15s;
}
.ccmts-blog a.ccmts-blog__btn svg {
width: 16px;
height: 16px;
}
.ccmts-blog a.ccmts-blog__btn--primario {
background: var( --ccmts-tinta );
color: #fff;
}
.ccmts-blog a.ccmts-blog__btn--primario:hover,
.ccmts-blog a.ccmts-blog__btn--primario:focus-visible {
background: var( --ccmts-rojo );
border-color: var( --ccmts-rojo );
color: #fff;
}
@media ( max-width: 520px ) {
.ccmts-blog__ctas,
.ccmts-blog a.ccmts-blog__btn {
width: 100%;
justify-content: center;
}
}
/* ── Cuerpo: lateral | artículo | fader ─────────────────────────────── */
.ccmts-blog__cuerpo {
display: grid;
grid-template-columns: minmax( 0, 1fr );
}
.ccmts-blog__lateral,
.ccmts-blog__fader {
display: none;
}
@media ( min-width: 981px ) {
.ccmts-blog__cuerpo {
grid-template-columns: 200px minmax( 0, var( --ccmts-col ) );
gap: clamp( 24px, 4vw, 48px );
}
.ccmts-blog__cuerpo--sin-lateral {
grid-template-columns: minmax( 0, var( --ccmts-col ) );
justify-content: center;
}
.ccmts-blog__lateral {
display: block;
border-right: 1px solid var( --ccmts-linea );
padding: 36px 24px 36px 0;
}
}
@media ( min-width: 1180px ) {
.ccmts-blog__cuerpo {
grid-template-columns: 200px minmax( 0, var( --ccmts-col ) ) 150px;
justify-content: space-between;
}
.ccmts-blog__cuerpo--sin-lateral {
grid-template-columns: minmax( 0, var( --ccmts-col ) ) 150px;
justify-content: center;
}
.ccmts-blog__cuerpo--sin-fader {
grid-template-columns: 200px minmax( 0, var( --ccmts-col ) );
}
.ccmts-blog__cuerpo--sin-lateral.ccmts-blog__cuerpo--sin-fader {
grid-template-columns: minmax( 0, var( --ccmts-col ) );
}
.ccmts-blog__fader {
display: grid;
}
}
.ccmts-blog p.ccmts-blog__lateral-t,
.ccmts-blog__fader-t {
font: 500 12px/1 var( --ccmts-mono );
letter-spacing: .08em;
text-transform: uppercase;
color: var( --ccmts-grafito );
margin: 0 0 18px;
}
.ccmts-blog .ccmts-blog__lateral a {
display: block;
text-decoration: none;
padding: 16px 0;
border-top: 1px solid var( --ccmts-linea );
}
.ccmts-blog__lateral small {
display: block;
font: 500 11px/1 var( --ccmts-mono );
letter-spacing: .08em;
text-transform: uppercase;
color: var( --ccmts-grafito );
margin-bottom: 8px;
}
.ccmts-blog__lateral span {
font: 700 15px/1.3 var( --ccmts-display );
letter-spacing: -.01em;
}
.ccmts-blog .ccmts-blog__lateral a:hover span {
color: var( --ccmts-rojo );
}
.ccmts-blog__pegado {
position: sticky;
top: calc( var( --ccmts-cabecera ) + 24px );
}
.ccmts-blog__articulo {
min-width: 0;
padding: 44px 0 0;
}
/* ── El fader: el índice como un canal de mezcladora ────────────────────
* Solo en pantallas grandes (≥1180 px), en su propia columna de la rejilla:
* no flota encima de nada del tema. La perilla la mueve ccmts-articulo.js. */
.ccmts-blog__fader {
position: sticky;
top: max( 30vh, calc( var( --ccmts-cabecera ) + 24px ) );
align-self: start;
margin-top: 120px;
grid-template-columns: auto 1fr;
gap: 6px 10px;
}
.ccmts-blog__fader-t {
grid-column: 1 / -1;
margin-bottom: 4px;
font-size: 11px;
}
.ccmts-blog__riel {
position: relative;
width: 4px;
margin: 0 12px;
background: #d9d9d6;
border-radius: 2px;
}
.ccmts-blog__riel::before,
.ccmts-blog__riel::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 6px;
background: repeating-linear-gradient( to bottom, #bdbdbd 0 1px, transparent 1px 12px );
}
.ccmts-blog__riel::before { right: 9px; }
.ccmts-blog__riel::after { left: 9px; }
.ccmts-blog__perilla {
position: absolute;
left: 50%;
top: 0;
width: 28px;
height: 16px;
transform: translate( -50%, -50% );
background: var( --ccmts-tinta );
border-radius: 2px;
box-shadow: inset 0 -3px 0 rgba( 255, 255, 255, .12 ), 0 2px 6px rgba( 0, 0, 0, .25 );
transition: top .25s cubic-bezier( .3, .7, .2, 1 );
}
.ccmts-blog__perilla::after {
content: "";
position: absolute;
left: 3px;
right: 3px;
top: 50%;
height: 2px;
margin-top: -1px;
background: var( --ccmts-rojo );
}
.ccmts-blog .ccmts-blog__fader ol {
list-style: none;
margin: 0;
padding: 6px 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.ccmts-blog .ccmts-blog__fader a {
text-decoration: none;
font: 500 13px/1.25 var( --ccmts-texto );
color: var( --ccmts-grafito );
display: block;
}
.ccmts-blog .ccmts-blog__fader a:hover,
.ccmts-blog .ccmts-blog__fader a[aria-current="true"] {
color: var( --ccmts-tinta );
}
.ccmts-blog .ccmts-blog__fader a[aria-current="true"] {
font-weight: 700;
}
/* ── Cierre ─────────────────────────────────────────────────────────── */
.ccmts-blog__cierre {
background: var( --ccmts-tinta );
color: #fff;
margin-top: 3em;
padding: 28px;
border-radius: var( --ccmts-radio );
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
}
.ccmts-blog .ccmts-blog__cierre p {
margin: 6px 0 0;
color: #cfcfcf;
}
.ccmts-blog .ccmts-blog__cierre p.ccmts-blog__cierre-t {
margin: 0;
font: 700 22px/1.2 var( --ccmts-display );
color: #fff;
}
.ccmts-blog .ccmts-blog__cierre a.ccmts-blog__btn {
border-color: #fff;
color: #fff;
}
.ccmts-blog .ccmts-blog__cierre a.ccmts-blog__btn:hover {
background: var( --ccmts-rojo );
border-color: var( --ccmts-rojo );
}
@media ( max-width: 620px ) {
.ccmts-blog__cierre {
grid-template-columns: 1fr;
}
}
/* ── Comparación: encabezado ────────────────────────────────────────── */
.ccmts-blog--comparacion .ccmts-blog__cab,
.ccmts-blog--comparacion .ccmts-blog__articulo {
max-width: 1040px;
margin-inline: auto;
}
.ccmts-blog__cab {
padding-block: clamp( 36px, 6vw, 64px ) 8px;
text-align: center;
}
.ccmts-blog .ccmts-blog__cab h1.ccmts-blog__titulo {
font-size: clamp( 30px, 4.6vw, 54px );
line-height: 1.04;
max-width: 18ch;
margin-top: 12px;
}
.ccmts-blog .ccmts-blog__cab p.ccmts-blog__lede {
max-width: 56ch;
font-size: 17px;
}
.ccmts-blog__cab .ccmts-blog__meta {
justify-content: center;
margin-top: 18px;
}
.ccmts-blog--comparacion .ccmts-blog__articulo {
padding-top: 0;
}
/* ════════════════════════════════════════════════════════════════════
ARTÍCULO (post_content)
════════════════════════════════════════════════════════════════════ */
.ccmts-art {
color: var( --ccmts-tinta );
font: 400 17px/1.65 var( --ccmts-texto );
}
/* Fuera del diseño (borradores v2 sin la página): ancho de lectura. */
.ccmts-art:not( .ccmts-blog .ccmts-art ) {
max-width: 72ch;
margin-inline: auto;
}
.ccmts-art a {
color: inherit;
}
.ccmts-art p {
margin: 0 0 1.1em;
}
.ccmts-art h2 {
font: 700 clamp( 24px, 2.6vw, 30px )/1.15 var( --ccmts-display );
letter-spacing: -.025em;
margin: 2.2em 0 .5em;
color: var( --ccmts-tinta );
scroll-margin-top: calc( var( --ccmts-cabecera, 96px ) + 24px );
}
.ccmts-art h3 {
font: 700 18px/1.3 var( --ccmts-display );
margin: 1.6em 0 .4em;
color: var( --ccmts-tinta );
}
.ccmts-art ul,
.ccmts-art ol {
margin: 0 0 1.1em;
padding-left: 1.2em;
}
.ccmts-art strong {
font-weight: 700;
}
/* La marca CCM roja como letra inicial del primer párrafo. */
.ccmts-art p.ccmts-art__intro {
display: flow-root;
}
.ccmts-art p.ccmts-art__intro::before {
content: "CCM";
float: left;
width: 54px;
height: 62px;
margin: 6px 16px 4px 0;
padding: 6px;
background: var( --ccmts-rojo );
border-radius: var( --ccmts-radio );
color: #fff;
display: flex;
align-items: flex-end;
font: 700 15px/1 var( --ccmts-display );
letter-spacing: -.02em;
}
.ccmts-art__dato {
font-family: var( --ccmts-mono );
font-size: .88em;
background: var( --ccmts-aluminio );
padding: 1px 6px;
border-radius: var( --ccmts-radio );
white-space: nowrap;
}
.ccmts-art__nota {
/* Barra recta (decisión del dueño, 23-sep): este callout NO lleva radio. */
border-left: 3px solid var( --ccmts-rojo );
border-radius: 0;
padding: 4px 0 4px 18px;
margin: 1.6em 0;
color: #333;
}
.ccmts-art__nota strong {
display: block;
font: 700 15px/1.3 var( --ccmts-display );
margin-bottom: 4px;
}
.ccmts-art p.ccmts-art__aclara {
font: 400 12px/1.4 var( --ccmts-mono );
color: var( --ccmts-grafito );
margin: .4em 0 0;
}
/* ── comunes: ficha plegable, preguntas, ficha completa ─────── */
.ccmts-art details {
border-bottom: 1px solid var( --ccmts-linea );
}
.ccmts-art details > summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 0;
font: 700 15px/1.25 var( --ccmts-display );
color: var( --ccmts-tinta );
}
.ccmts-art details > summary::-webkit-details-marker {
display: none;
}
.ccmts-art details > summary::after {
content: "+";
font: 400 22px/1 var( --ccmts-texto );
color: var( --ccmts-grafito );
flex: none;
}
.ccmts-art details[open] > summary::after {
content: "–";
}
.ccmts-art details > p {
margin: 0 0 16px;
color: #3a3a3a;
}
/* ── Guía: las tres gamas ───────────────────────────────────────────── */
.ccmts-art__gamas {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1px;
background: var( --ccmts-linea );
border: 1px solid var( --ccmts-linea );
border-radius: var( --ccmts-radio );
overflow: hidden;
margin: 1.4em 0 .6em;
}
@media ( max-width: 720px ) {
.ccmts-art__gamas {
grid-template-columns: minmax( 0, 1fr );
}
}
.ccmts-art__gama {
background: var( --ccmts-papel );
padding: 18px 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.ccmts-art p.ccmts-art__nivel {
margin: 0;
font: 500 11px/1 var( --ccmts-mono );
letter-spacing: .08em;
text-transform: uppercase;
color: var( --ccmts-grafito );
}
.ccmts-art .ccmts-art__gama p.ccmts-art__porque {
margin: 0;
font-size: 14.5px;
line-height: 1.5;
color: #3a3a3a;
}
.ccmts-art ul.ccmts-art__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.ccmts-art ul.ccmts-art__chips li {
font: 400 12px/1 var( --ccmts-mono );
background: var( --ccmts-aluminio );
border-radius: var( --ccmts-radio );
padding: 6px 8px;
margin: 0;
}
.ccmts-art__pie {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 52px;
}
.ccmts-art__pie > p {
margin: 0;
}
/* La tarjeta de ccm-gallery dentro de una gama (o de la ficha): imagen sobre
* aluminio, cuadrada, y el nombre debajo en negrita. Solo se reescala lo que
* la tarjeta ya trae; el precio y el botón de carrito vienen apagados desde el
* shortcode (ver ccmts-producto-tarjeta-shortcode.php). */
.ccmts-art .ccmts-art__tarjeta {
max-width: none;
margin: 0;
}
.ccmts-art .ccmts-art__tarjeta .ccmg-card {
gap: 10px;
background: transparent;
}
.ccmts-art .ccmts-art__tarjeta .ccmg-card__media {
border-radius: var( --ccmts-radio );
aspect-ratio: 1;
background: var( --ccmts-aluminio );
}
.ccmts-art .ccmts-art__tarjeta .ccmg-card__overlay {
display: none;
}
.ccmts-art .ccmts-art__tarjeta .ccmg-card__image-wrap {
padding: 14px;
border-radius: var( --ccmts-radio );
}
.ccmts-art .ccmts-art__tarjeta .ccmg-card__img {
border-radius: 0;
mix-blend-mode: multiply;
}
.ccmts-art .ccmts-art__tarjeta .ccmg-card__body {
padding: 0;
}
.ccmts-art .ccmts-art__tarjeta .ccmg-card__title {
font: 700 16px/1.25 var( --ccmts-display );
letter-spacing: -.01em;
color: var( --ccmts-tinta );
max-height: none;
-webkit-line-clamp: 3;
margin-top: 4px;
}
.ccmts-art .ccmts-art__tarjeta .ccmg-card__body-link:hover .ccmg-card__title {
color: var( --ccmts-rojo );
}
/* ── Guía: ficha rápida (foto | tabla plegable) ─────────────────────── */
.ccmts-art__ficha {
display: grid;
grid-template-columns: 200px minmax( 0, 1fr );
gap: 28px;
margin: 1.2em 0;
border-top: 1px solid var( --ccmts-tinta );
padding-top: 22px;
}
@media ( max-width: 620px ) {
.ccmts-art__ficha {
grid-template-columns: minmax( 0, 1fr );
}
}
.ccmts-art .ccmts-art__ficha .ccmg-card__title {
font-size: 15px;
}
.ccmts-art p.ccmts-art__sku {
font: 400 12px/1 var( --ccmts-mono );
color: var( --ccmts-grafito );
margin: 8px 0 0;
}
.ccmts-art dl {
display: grid;
grid-template-columns: minmax( 120px, 40% ) 1fr;
margin: 0 0 14px;
font-size: 14px;
}
.ccmts-art dt,
.ccmts-art dd {
margin: 0;
padding: 9px 0;
border-top: 1px solid var( --ccmts-linea );
}
.ccmts-art dt {
color: var( --ccmts-grafito );
font-weight: 400;
}
.ccmts-art dd {
font-family: var( --ccmts-mono );
font-size: 13.5px;
}
/* «Sin dato en la ficha» NO es «No». Se ve distinto a propósito: gris, en
* mono, con una raya delante. «No» es un dato y se escribe como cualquier otro. */
.ccmts-art .ccmts-art__nd,
.ccmts-art .ccmts-art__sindato {
color: #9a9a9a;
font-family: var( --ccmts-mono );
}
.ccmts-art .ccmts-art__sindato {
font-size: 13px;
line-height: 1.3;
}
.ccmts-art .ccmts-art__sindato::before {
content: "";
display: inline-block;
width: 14px;
height: 1px;
background: currentColor;
vertical-align: middle;
margin-right: 8px;
}
/* ── Preguntas ──────────────────────────────────────────────────────── */
.ccmts-art .ccmts-art__faq details > summary {
font-size: 16px;
}
/* ── Comparación: las columnas de entrada ───────────────────────────── */
.ccmts-art__trio {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax( 0, 1fr );
gap: clamp( 16px, 3vw, 32px );
padding-block: clamp( 36px, 5vw, 56px ) clamp( 48px, 6vw, 72px );
}
.ccmts-art__col {
display: flex;
flex-direction: column;
min-width: 0;
}
/* El nombre ARRIBA de la foto, con su filete, como en la maqueta: se
* reordena la tarjeta de ccm-gallery, no se reescribe. */
.ccmts-art .ccmts-art__col .ccmg-card {
gap: 0;
}
.ccmts-art .ccmts-art__col .ccmg-card__body-link {
order: -1;
}
.ccmts-art .ccmts-art__col .ccmg-card__title {
font: 700 clamp( 19px, 2vw, 24px )/1.15 var( --ccmts-display );
letter-spacing: -.02em;
-webkit-line-clamp: 3;
min-height: 3.45em;
padding-bottom: 14px;
border-bottom: 1px solid var( --ccmts-linea );
margin: 0;
}
.ccmts-art .ccmts-art__col .ccmg-card__media {
margin: 26px 0 22px;
}
.ccmts-art .ccmts-art__col .ccmg-card__img {
transition: transform .5s cubic-bezier( .2, .7, .2, 1 );
}
.ccmts-art .ccmts-art__col:hover .ccmg-card__img {
transform: translateY( -6px ) scale( 1.02 );
}
.ccmts-art .ccmts-art__col p.ccmts-art__desc {
margin: 0;
color: #4a4a4a;
font-size: 15.5px;
line-height: 1.55;
flex: 1;
}
.ccmts-art .ccmts-art__col p.ccmts-art__variante {
margin: 18px 0 6px;
font: 500 14px/1.2 var( --ccmts-texto );
color: var( --ccmts-rojo );
}
/* La fila de compra alineada entre columnas aunque la descripción o las specs
* ocupen distinto: cada columna toma las 4 filas del trío (subgrid) y cada
* pieza va a la suya. Sin `variante` su fila queda vacía, no se corre el resto.
* Solo en escritorio: en el móvil las columnas se apilan. */
@media ( min-width: 761px ) {
.ccmts-art__trio {
grid-template-rows: repeat( 4, auto );
row-gap: 0;
}
.ccmts-art__col {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
align-content: start;
}
.ccmts-art__col > .ccmts-art__foto { grid-row: 1; }
.ccmts-art__col > .ccmts-art__desc { grid-row: 2; }
.ccmts-art__col > .ccmts-art__variante { grid-row: 3; }
.ccmts-art__col > .ccmts-art__pie { grid-row: 4; }
/* Dentro del pie, el precio tiene su renglón aunque falte (agotado): así
* «Disponible/Agotado» y los botones quedan a la misma altura. */
.ccmts-art__col .ccmts-pv--columna .ccmts-pv__vivo {
grid-template-rows: minmax( 20px, auto ) auto;
}
.ccmts-art__col .ccmts-pv--columna .ccmts-pv__precio {
grid-row: 1;
line-height: 20px;
}
.ccmts-art__col .ccmts-pv--columna .ccmts-pv__estado {
grid-row: 2;
}
}
@media ( max-width: 760px ) {
.ccmts-art__trio {
grid-auto-flow: row;
gap: 40px;
}
.ccmts-art .ccmts-art__col .ccmg-card__title {
min-height: 0;
}
}
/* ── Comparación: vista rápida ──────────────────────────────────────── */
/* Sin franja gris: cortaba la página en dos y las columnas de abajo parecían
* otra cosa. Un solo bloque blanco con las tarjetas, separado con aire y una
* raya fina; las fotos de las tarjetas ya son grises y sobre gris se perdían. */
.ccmts-art__rapida {
border-top: 1px solid var( --ccmts-linea );
padding: clamp( 40px, 6vw, 72px ) 0 clamp( 48px, 7vw, 88px );
}
.ccmts-art h2.ccmts-art__rapida-t {
font: 700 clamp( 34px, 5vw, 56px )/1 var( --ccmts-display );
letter-spacing: -.04em;
margin: 0 0 clamp( 28px, 4vw, 48px );
}
.ccmts-art__rapida-filas {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ccmts-art__fila {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax( 0, 1fr );
gap: clamp( 16px, 3vw, 32px );
}
.ccmts-art__fila + .ccmts-art__fila {
margin-top: clamp( 36px, 5vw, 56px );
}
.ccmts-art__fila:first-child .ccmts-art__celda {
border-top: 2px solid var( --ccmts-tinta );
padding-top: 28px;
}
/* Cabecera de columna (la pone CCMTS_Blog_Pagina): miniatura + nombre corto
* sobre la raya negra, para que cada columna diga de qué producto es. En
* escritorio se pega arriba mientras se recorre la vista rápida. */
.ccmts-art__fila--cab {
background: var( --ccmts-papel );
}
.ccmts-art__cab {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 0 14px;
border-bottom: 2px solid var( --ccmts-tinta );
min-width: 0;
}
.ccmts-art__cab-foto {
display: block;
width: 56px;
height: 56px;
padding: 5px;
box-sizing: border-box;
background: var( --ccmts-aluminio );
border-radius: var( --ccmts-radio );
}
/* Como en las tarjetas: la foto (fondo blanco) se funde con el aluminio. */
.ccmts-art__cab-foto img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
}
.ccmts-art__cab-nombre {
font: 700 15px/1.2 var( --ccmts-display );
letter-spacing: -.01em;
text-align: center;
overflow-wrap: anywhere;
}
.ccmts-art__fila--cab + .ccmts-art__fila {
margin-top: 0;
}
.ccmts-art__fila--cab + .ccmts-art__fila .ccmts-art__celda {
padding-top: 28px;
}
@media ( min-width: 761px ) {
/* `overflow-x: auto` convierte el contenedor en caja de scroll y el sticky
* se pegaría a él (que no se mueve). En escritorio no hace falta deslizar. */
.ccmts-art__rapida-filas {
overflow: visible;
}
/* Se pega justo bajo la cabecera de la tienda, que al llegar aquí ya está
* compacta: mide la franja superior (`--ccmts-h-alto-barra`, 82 px, la
* declara ccmts-header.css). Con los 96 de `--ccmts-cabecera` quedaba una
* rendija de 14 px por la que asomaban los números al pasar. */
.ccmts-art__fila--cab {
position: sticky;
top: var( --ccmts-h-alto-barra, var( --ccmts-cabecera ) );
z-index: 2;
}
}
/* Pista de deslizar (vista rápida y ficha completa), solo en el móvil, que es
* donde desbordan: el borde derecho se funde para dejar asomar la columna que
* falta. La máscara va sobre la caja que desliza, así que se queda quieta en su
* borde mientras el contenido pasa. ccmts-articulo.js la quita al llegar al
* final (o si no desborda) y añade la línea «Desliza para ver los N →». Sin JS
* el degradado queda puesto: se ve y no molesta. */
@media ( max-width: 760px ) {
.ccmts-art__rapida-filas,
.ccmts-art__tabla-wrap {
-webkit-mask-image: linear-gradient( to right, #000 calc( 100% - 56px ), transparent );
mask-image: linear-gradient( to right, #000 calc( 100% - 56px ), transparent );
}
/* Desde 1.11.4 la vista rápida CABE en el móvil (ver «Vista rápida en el
* móvil» más abajo): no desliza, así que tampoco lleva degradado. La regla
* de arriba la sigue cubriendo por si un día vuelve a desbordar con JS. */
.ccmts-art__rapida-filas:not( .ccmts-art__desliza--hay ) {
-webkit-mask-image: none;
mask-image: none;
}
.ccmts-art__rapida-filas.ccmts-art__desliza--fin,
.ccmts-art__tabla-wrap.ccmts-art__desliza--fin {
-webkit-mask-image: none;
mask-image: none;
}
}
.ccmts-art p.ccmts-art__pista {
margin: 0 0 12px;
font: 400 12px/1.3 var( --ccmts-mono );
color: var( --ccmts-grafito );
text-align: right;
}
.ccmts-art p.ccmts-art__pista[hidden] {
display: none;
}
@media ( min-width: 761px ) {
.ccmts-art p.ccmts-art__pista {
display: none;
}
}
@media ( prefers-reduced-motion: no-preference ) {
.ccmts-art p.ccmts-art__pista {
animation: ccmts-pista-entra .3s ease-out both;
}
@keyframes ccmts-pista-entra {
from { opacity: 0; }
}
}
.ccmts-art__celda {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.ccmts-art__grande {
font: 700 clamp( 40px, 5.5vw, 64px )/.95 var( --ccmts-display );
letter-spacing: -.04em;
}
.ccmts-art__grande--nd {
color: var( --ccmts-grafito );
font-weight: 400;
}
.ccmts-art .ccmts-art__sindato--celda::before {
display: none;
}
.ccmts-art__grande small {
font-size: .42em;
letter-spacing: 0;
margin-left: 2px;
}
.ccmts-art__lbl {
font: 700 15px/1.3 var( --ccmts-texto );
}
.ccmts-art__sub {
font: 400 14.5px/1.4 var( --ccmts-texto );
color: var( --ccmts-grafito );
max-width: 26ch;
}
.ccmts-art p.ccmts-art__leyenda {
margin: clamp( 36px, 5vw, 56px ) 0 0;
font: 400 12.5px/1.5 var( --ccmts-mono );
color: var( --ccmts-grafito );
}
/* Iconos de la vista rápida. El post_content pasa por kses (el bot es
* Colaborador) y kses NO deja pasar