/* MotorCasión · F12 · «Tu negocio en nuestros artículos» · 03/10/2026, Claude Code en la nube.
 * El recuadro del final del artículo (partes/anuncio-articulo.php) y la pantalla /anunciate/. Tokens --mc-*, sin !important, sin @layer.
 * Seña de la marca: el filo rojo INCLINADO a la izquierda (la caja roja del logo), solo como adorno: el texto nunca va encima del rojo claro.
 */
.mc-anuncio-art { position: relative; isolation: isolate; overflow: hidden; margin: var(--mc-e-8) 0; padding: var(--mc-e-5) var(--mc-e-5) var(--mc-e-5) calc(var(--mc-e-5) + 14px); background: var(--mc-superficie); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-l); box-shadow: var(--mc-sombra-1); }
.mc-anuncio-art::before { content: ""; position: absolute; left: -8px; top: var(--mc-e-5); width: 18px; height: 1.9em; background: var(--mc-rojo-logo); transform: skewX(var(--mc-inclinacion)); border-radius: 3px; z-index: -1; } /* la caja roja inclinada del logo, como pestaña (en una caja alta, un filo inclinado se desplazaba y cruzaba el texto: medido a 375 el 03/10) */
.mc-anuncio-art .mc-sello { white-space: normal; text-align: left; line-height: 1.25; } /* el nombre del anunciante puede ser largo: a 375 se salía de la caja */
.mc-anuncio-art p { margin: 0 0 var(--mc-e-2); }
.mc-anuncio-art__titulo { font-family: var(--mc-letra-titulos); font-size: var(--mc-t-h4); font-weight: 700; color: var(--mc-texto); line-height: var(--mc-lh-titulo); }
.mc-anuncio-art__nombre a { color: var(--mc-texto); }
.mc-anuncio-art__texto { color: var(--mc-texto-2); }
.mc-anuncio-art__botones { display: flex; flex-wrap: wrap; gap: var(--mc-e-3); margin-top: var(--mc-e-4); }
.mc-anuncio-art__botones .mc-icono { width: 1.1em; height: 1.1em; }
.mc-anuncio-art__pie { margin-top: var(--mc-e-3); font-size: var(--mc-t-xs); color: var(--mc-texto-3); }
.mc-anuncio-art__pie a { color: var(--mc-texto-2); }
.mc-anuncio-art--libre { background: var(--mc-superficie-2); border-style: dashed; box-shadow: none; }
@media (max-width: 479px) { .mc-anuncio-art__botones .mc-boton { width: 100%; } }

/* ---- /anunciate/ ---- */
.mc-anu__bloque { margin-top: var(--mc-seccion); }
.mc-anu__pasos { padding-left: 1.2em; display: grid; gap: var(--mc-e-2); }
.mc-anu__botones { display: flex; flex-wrap: wrap; gap: var(--mc-e-3); }
.mc-anu__grupo-serv { margin: var(--mc-e-3) 0 var(--mc-e-1); }
.mc-pagina--anunciate .mc-opcion { display: inline-flex; align-items: center; gap: var(--mc-e-2); min-height: var(--mc-tactil); margin-right: var(--mc-e-4); }

/* El recuadro vive dentro del texto del artículo: allí los enlaces van en azul y subrayados (.mc-pagina .mc-prosa a, 0-2-1, blog.css).
   Los botones ganan con un selector más (0-3-1), sin !important (medido en la réplica el 03/10: salían subrayados y azules sobre rojo). */
.mc-anuncio-art .mc-anuncio-art__botones a.mc-boton { text-decoration: none; }
.mc-anuncio-art .mc-anuncio-art__botones a.mc-boton--primario, .mc-anuncio-art .mc-anuncio-art__botones a.mc-boton--primario:hover { color: var(--mc-sobre-rojo); }
.mc-anuncio-art .mc-anuncio-art__botones a.mc-boton--secundario { color: var(--mc-texto); }
.mc-anuncio-art .mc-anuncio-art__botones a.mc-boton--secundario:hover { color: var(--mc-fondo); }
.mc-pagina--anunciate fieldset.mc-campo { border: 0; padding: 0; margin: 0 0 var(--mc-e-4); min-width: 0; }